jquery Setting cursor position in contenteditable div

by

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();

More Related Contents:

  1. How to set the caret (cursor) position in a contenteditable element (div)?
  2. Set focus on div contenteditable element
  3. Set cursor position on contentEditable
  4. Cursor position in a textarea (character index, not x/y coordinates)
  5. jQuery: Get the cursor position of text in input without browser specific code? [duplicate]
  6. Dealing with line Breaks on contentEditable DIV
  7. Set Focus After Last Character in Text Box
  8. trigger an event when contenteditable is changed
  9. How to select an element that has focus on it with jQuery
  10. Selecting text on focus using jQuery not working in Safari and Chrome
  11. How to select all images using jquery and give them an width?
  12. How can I find elements by text content with jQuery?
  13. Calculating text width
  14. iframe to Only Show a Certain Part of the Page
  15. Pass array to ajax request in $.ajax() [duplicate]
  16. Animate element transform rotate
  17. Django dependent select
  18. How to detect new element creation in jQuery?
  19. jQuery UI Datepicker – Disable specific days
  20. jQuery add CSRF token to all $.post() requests’ data
  21. jQuery Ajax simple call
  22. Ajax call to download file returned from RESTful service
  23. A cleaner way to select by multiple possible attribute values?
  24. jquery can’t get data attribute value
  25. Get content of span
  26. Cleanest way to get the next sibling in jQuery
  27. Basic how-to for cross domain jsonp
  28. Toggle width with jQuery
  29. jQuery validate plugin : accept letters only?
  30. JQuery-Mobile collapsible expand/collapse event

Leave a Comment