Set cursor after span element inside contenteditable div

by

In browsers other than IE <= 8, this will do it:

function placeCaretAfterNode(node) {
    if (typeof window.getSelection != "undefined") {
        var range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

However, some browsers (notably WebKit-based ones) have fixed ideas about which positions in the document are valid for the caret and will normalize any range you add to the selection to comply with those ideas. The following example will do what you want in Firefox and IE 9 but not in Chrome or Safari as a result:

http://jsfiddle.net/5dxwx/

None of the workarounds are good. Options include:

  • add a zero-width space character after the span and select it
  • use an <a> element instead of a <span> because WebKit makes an exception for <a> elements

More Related Contents:

  1. contenteditable change events
  2. contenteditable, set caret at the end of the text (cross-browser)
  3. Set cursor position on contentEditable
  4. Prevent contenteditable adding on ENTER – Chrome
  5. replace innerHTML in contenteditable div
  6. Get caret index in contenteditable div including tags
  7. How to select all text in contenteditable div?
  8. How to disable elements selection and resizing in contenteditable div?
  9. How to make an HTML element editable cross-browser?
  10. Make a instead of by pressing Enter on a contenteditable
  11. Extracting text from a contentEditable div
  12. Get content of span
  13. contenteditable div backspace and deleting text node problems
  14. Making a quiz in HTML and Javascript [closed]
  15. javascript function doesn’t work when link is clicked
  16. How to save an image to localStorage and display it on the next page?
  17. Is it wrong to place the tag after the tag?
  18. How to add line breaks to an HTML textarea
  19. Using an HTML button to call a JavaScript function
  20. Get caret (cursor) position in contentEditable area containing HTML content
  21. How to make ng-bind-html compile angularjs code
  22. How to convert html table to excel with multiple sheet?
  23. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  24. Dynamically using the first frame as poster in HTML5 video?
  25. Set caret position right after the inserted element in a contentEditable div
  26. play pause html5 video javascript
  27. How to check if input file is empty in jQuery
  28. Checking if a html5 video is ready
  29. how to save canvas data to file
  30. trigger file upload dialog using javascript/jquery

Leave a Comment