Inserting text at cursor in a textarea, with Javascript

by

No, there isn’t. IE has its TextRange objects to do the job. IE >= 9 and everything else for the last long time has selectionStart and selectionEnd properties on textareas and text inputs. This particular task isn’t too bad: the following will delete the current selection (if one exists), insert text at the caret and reposition the caret immediately after the inserted text, in all the major browsers:

function insertTextAtCursor(el, text) {
    var val = el.value, endIndex, range;
    if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length;
    } else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
        el.focus();
        range = document.selection.createRange();
        range.collapse(false);
        range.text = text;
        range.select();
    }
}

More Related Contents:

  1. textarea character limit
  2. Get the offset position of the caret in a textarea in pixels [duplicate]
  3. Set cursor to specific position on specific line in a textarea
  4. Find caret position in textarea in pixels [duplicate]
  5. Get the size of the screen, current web page and browser window
  6. What is JavaScript’s highest integer value that a number can go to without losing precision?
  7. ‘innerText’ works in IE, but not in Firefox
  8. How to fix Array indexOf() in JavaScript for Internet Explorer browsers
  9. Fixing JavaScript Array functions in Internet Explorer (indexOf, forEach, etc.) [closed]
  10. Memory leak risk in JavaScript closures
  11. browser sessionStorage. share between tabs?
  12. Crossbrowser onbeforeunload?
  13. Prevent zoom cross-browser
  14. Intercepting call to the back button in my AJAX application
  15. Chrome counts characters wrong in textarea with maxlength attribute
  16. Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
  17. How to add/remove a class in JavaScript?
  18. Limit number of lines in textarea and Display line count using jQuery
  19. How FileReader.readAsText in HTML5 File API works?
  20. Detecting when Iframe content has loaded (Cross browser)
  21. Get the string representation of a DOM node
  22. How can I make window.showmodaldialog work in chrome 37?
  23. Count textarea characters
  24. What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?
  25. Uncaught TypeError: Object.values is not a function JavaScript
  26. IE8 alternative to window.scrollY?
  27. Is there any problem with using HTML5’s “data-*” attributes for older browsers?
  28. How to change behavior of contenteditable blocks after on enter pressed in various browsers
  29. Cross Browser Selection Range Library?
  30. What browsers support the window.postMessage call now?

Leave a Comment