I have found this question which provides a solution to pute the exact position of the caret in a text or input box.

For my purposes, this is overkill. I only want to know when the caret is at the end of all the text of an input box. Is there an easy way to do that?

I have found this question which provides a solution to pute the exact position of the caret in a text or input box.

For my purposes, this is overkill. I only want to know when the caret is at the end of all the text of an input box. Is there an easy way to do that?

• javascript

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Oct 2, 2011 at 17:06 RandomblueRandomblue 116k150150 gold badges363363 silver badges558558 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

In all modern browsers:

//input refers to the text box
if(input.value.length == input.selectionEnd){
    //Caret at end.
}

The selectionEnd property of an input element equals the highest selection index.

<script>
input = document.getElementById('yourinputfieldsid');
if(input.selectionEnd == input.selectionStart && input.value.length == input.selectionEnd){
//your stuff
}
</script>

This checks to see if the caret actually is at the end, and makes sure that it isn't only because of the selection that it shows an end value.

You don't specify what you want to happen when some text is selected, so in that case my code just checks whether the end of the selection is at the end of the input.

Here's a cross-browser function that wil work in IE < 9 (which other answers will not: IE only got selectionStart and selectionEnd in version 9).

Live demo: http://jsfiddle/vkCpH/1/

Code:

function isCaretAtTheEnd(el) {
    var valueLength = el.value.length;
    if (typeof el.selectionEnd == "number") {
        // Modern browsers
        return el.selectionEnd == valueLength;
    } else if (document.selection) {
        // IE < 9
        var selRange = document.selection.createRange();
        if (selRange && selRange.parentElement() == el) {
            // Create a working TextRange that lives only in the input
            var range = el.createTextRange();
            range.moveToBookmark(selRange.getBookmark());
            return range.moveEnd("character", valueLength) == 0;
        }
    }
    return false;
}