Javascript: Move caret to last character

by

The following function will work in all major browsers, for both textareas and text inputs:

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

However, you really shouldn’t do this whenever the user clicks on the textarea, since the user will not be able to move the caret with the mouse. Instead, do it when the textarea receives focus. There is also a problem in Chrome, which can be worked around as follows:

Full example: http://www.jsfiddle.net/ghAB9/3/

HTML:

<textarea id="test">Something</textarea>

Script:

var textarea = document.getElementById("test");
textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};

More Related Contents:

  1. What characters are valid for JavaScript variable names?
  2. How to get the caret column (not pixels) position in a textarea, in characters, from the start?
  3. How to set the caret (cursor) position in a contenteditable element (div)?
  4. Get a range’s start and end offset’s relative to its parent container
  5. Get contentEditable caret position
  6. Repeat a string in JavaScript a number of times
  7. contenteditable, set caret at the end of the text (cross-browser)
  8. Highlight text range using JavaScript
  9. How can I remove a character from a string using JavaScript?
  10. Get caret position in HTML input?
  11. How to get the focused element with jQuery?
  12. How to check if character is a letter in Javascript?
  13. Javascript: Words to numbers [closed]
  14. How can I use modulo operator (%) in JavaScript? [duplicate]
  15. Get element node at caret position (in contentEditable)
  16. Trying to capitalize the first character in array of strings, why this is not working?
  17. Only allow certain characters to be entered in html textinput
  18. Tag-like autocompletion and caret/cursor movement in contenteditable elements
  19. How to retrieve GET parameters from JavaScript [duplicate]
  20. Mimicking sets in JavaScript?
  21. Android Calling JavaScript functions in WebView
  22. How to get a style attribute from a CSS class by javascript/jQuery?
  23. Leaflet drawing tiles disjointly
  24. JavaScript summing large integers
  25. jQuery counting elements by class – what is the best way to implement this?
  26. Why in JavaScript both “Object instanceof Function” and “Function instanceof Object” return true?
  27. why referencing non-existent property of an object in javascript doesn’t return a reference error?
  28. mongoose .find() method returns object with unwanted properties
  29. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  30. Angular – ‘Could not find HammerJS’

Leave a Comment