显示输入框时光标自动定位到输入框内容的最后

思路就是利用input元素中的setSelectionRange方法

setSelectionRange(posstart,posend)用来选中被focus的输入框的特定范围.

开始位置和结束位置设置为内容的总长度，光标就会定位到内容最右边。

    <body>
        <input id="textarea-1" onfocus="setCss(this)" type="text" name="" value="这是一个自动让光标定位到文本框的最后面的一个demo" autofocus >
        <button class="btn" onclick="setCss()">定位光标</button>
    </body>
    <script>

    function setCss(opt){
            var sr=document.getElementById("textarea-1");
            var len = sr.value.length;
            setSelectionRange(sr,len,len); //将光标定位到文本最后 
        }

        function setSelectionRange(input, selectionStart, selectionEnd) {
            if (input.setSelectionRange) {  
                input.focus();  
                input.setSelectionRange(selectionStart, selectionEnd);  
            }  
            else if (input.createTextRange) {  
                var range = input.createTextRange();  
                range.collapse(true);  
                range.moveEnd('character', selectionEnd);  
                range.moveStart('character', selectionStart);  
                range.select();  
            } 
        } 
      
    </script>

需要注意到是，元素一定要被选中然后才能通过setSelectionRange方法设置选中。

这里有个这样的需求，在点击按钮时光标定位到输入框最后面同时输入框到内容显示到最后面。

先给输入框设置autofocus自动定位，然后自动调用onfocus方法先调用一次setCss，让输入框聚焦，然后再点击按钮再调用setCss一次，这时输入框已经聚焦了，setSelectionRange调用有效。

在crome上测试，第一次调用setSelectionRange，光标移到了输入框内容最后面，但是内容显示没有定位到最后面，需要调用第二次才可以。

显示输入框时光标自动定位到输入框内容的最后

猜你喜欢