Here’s an answer adapted from Persisting the changes of range objects after selection in HTML. Bear in mind that this is less than perfect in several ways (as is MaxArt’s, which uses the same approach): firstly, only text nodes are taken into account, meaning that line breaks implied by <br> and block elements are not … Read more
The following function will insert text at the caret position and delete the existing selection. It works in all the mainstream desktop browsers: function insertTextAtCaret(text) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode( document.createTextNode(text) ); } } else if (document.selection && document.selection.createRange) { … Read more
Try this: $(‘div[contenteditable]’).keydown(function(e) { // trap the return key being pressed if (e.keyCode === 13) { // insert 2 br tags (if only one br tag is inserted the cursor won’t go to the next line) document.execCommand(‘insertHTML’, false, ‘<br/>’); // prevent the default behaviour of return key pressed return false; } }); Click here for … Read more
See here for working jsFiddle: http://jsfiddle.net/dKaJ3/2/ function getSelectionHtml() { var html = “”; if (typeof window.getSelection != “undefined”) { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement(“div”); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != … Read more
Edit: See Sebastien Lorber’s answer which fixes a bug in my implementation. Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events. I’d personally have this as my render function. var handleChange = function(event){ this.setState({html: event.target.value}); }.bind(this); return (<ContentEditable html={this.state.html} onChange={handleChange} />); … Read more
If you want to select all the content of an element (contenteditable or not) in Chrome, here’s how. This will also work in Firefox, Safari 3+, Opera 9+ (possibly earlier versions too) and IE 9. You can also create selections down to the character level. The APIs you need are DOM Range (current spec is … Read more
UPDATE I’ve written a simpler version of this that also works in IE < 9: https://stackoverflow.com/a/4812022/96100 Old Answer This is actually a more useful result than a character offset within the text of the whole document: the startOffset property of a DOM Range (which is what window.getSelection().getRangeAt() returns) is an offset relative to its startContainer … Read more
Geowa4’s solution will work for a textarea, but not for a contenteditable element. This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable. function setEndOfContenteditable(contentEditableElement) { var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range … Read more
This solution works in all major browsers: saveSelection() is attached to the onmouseup and onkeyup events of the div and saves the selection to the variable savedRange. restoreSelection() is attached to the onfocus event of the div and reselects the selection saved in savedRange. This works perfectly unless you want the selection to be restored … Read more
The following function will do it in all major browsers: function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != “undefined” && typeof document.createRange != “undefined”) { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != “undefined”) { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } placeCaretAtEnd( … Read more