The old version of the question is below, after researching more, I decided to rephrase the question. The problem as before is, I need to focus a contenteditable div without highlighting the text, doing straight up focus highlights the text in Chrome.
I realize that people solved this problems in textareas by resetting the caret position in the textarea. How can I do that with a contenteditable element? All the plugins I've tried only works with textareas. Thanks.
Old Phrasing of the question:
I have a contenteditable element that I want to focus, but only insofar as to place the cursor at the front of the element, rather selecting everything.
elem.trigger('focus');
with jquery selects all the text in the entire element in chrome. Firefox behaves correctly, setting the caret at the front of the text. How can I get Chrome to behave the way I want, or is focus perhaps not what I'm looking for.
Thanks all.
To set caret position at a specific position in contenteditable div with JavaScript, we select the text node that with the text we want the cursor to be at and set the caret position there. to add a contenteditable div. Then we write: const node = document.
selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range range. collapse(false);//collapse the range to the end point. false means collapse to end rather than the start selection = window. getSelection();//get the selection object (allows you to change selection) selection.
To move the cursor to the end of an input field: Use the setSelectionRange() method to set the current text selection position to the end of the input field. Call the focus() method on the input element. The focus method will move the cursor to the end of the input element's value.
Maybe I'm misreading the question, but wouldn't the following do (assuming an editable <div>
with id "editable")? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focus
event, thereby overriding the effect of the selection code unless postponed until after the focus event:
var div = document.getElementById("editable"); div.onfocus = function() { window.setTimeout(function() { var sel, range; if (window.getSelection && document.createRange) { range = document.createRange(); range.selectNodeContents(div); range.collapse(true); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(div); range.collapse(true); range.select(); } }, 1); }; div.focus();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With