Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery Setting cursor position in contenteditable div

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.

like image 510
Mark Avatar asked May 20 '10 04:05

Mark


People also ask

How do you set a caret cursor position in Contenteditable element div?

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.

How do you move the cursor to the end of Contenteditable entity?

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.

How do you change the input cursor position?

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.


1 Answers

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(); 
like image 133
Tim Down Avatar answered Sep 20 '22 15:09

Tim Down