Google Chrome weird cursor blink on pages, never seen ’em before
An easy solution is to press the F7 key on the Chrome browser. This method makes it easy to enable/disable cursor blinking problem.
contenteditable
Set focus on div contenteditable element
Old post but none of the solutions worked for me. I figured it out eventually though: var div = document.getElementById(‘contenteditablediv’); setTimeout(function() { div.focus(); }, 0);
How to move cursor to end of contenteditable entity
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
contenteditable, set caret at the end of the text (cross-browser)
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
Programmatically select text in a contenteditable HTML element?
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
Set cursor position on contentEditable
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
React.js: onChange event for contentEditable
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} />); jsbin … Read more
Prevent contenteditable adding on ENTER – Chrome
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
Get contentEditable caret position
The following code assumes: There is always a single text node within the editable <div> and no other nodes The editable div does not have the CSS white-space property set to pre If you need a more general approach that will work content with nested elements, try this answer: https://stackoverflow.com/a/4812022/96100 Code: function getCaretPosition(editableDiv) { var … Read more
How to set the caret (cursor) position in a contenteditable element (div)?
In most browsers, you need the Range and Selection objects. You specify each of the selection boundaries as a node and an offset within that node. For example, to set the caret to the fifth character of the second line of text, you’d do the following: function setCaret() { var el = document.getElementById(“editable”) var range … Read more