将光标移动到输入的末尾答案

【问题标题】：move cursor to end of input将光标移动到输入的末尾
【发布时间】：2016-03-30 14:41:39
【问题描述】：

我的输入和 setSelectionRange 方法有问题。问题是我在末尾设置了光标位置：

input.setSelectionRange(input.value.length,input.value.length );

光标移动到结尾，但文本保持在同一位置。它适用于 Firefox，但不适用于 Chrome。

var input = document.querySelector("input");
input.onclick = function (){
  this.setSelectionRange(this.value.length,this.value.length )
}

&lt;input id="beLowerCase" type="Text" value="______________________________232332" /&gt;

【问题讨论】：

看看那里：stackoverflow.com/questions/11723420/…
@Magicprog.fr 和我的例子一样

标签： javascript html

【解决方案1】：

我找到了简单的解决方案 https://jsfiddle.net/r3yohhc0/1/ ，属性 scrollLeft

input.scrollLeft = input.scrollWidth;

【讨论】：

【解决方案2】：

这不是 JS 问题，而是 CSS 问题。

不用设置setSelectionRange，只需在代码中添加以下CSS即可。

<style>
input#beLowerCase {text-align:right;}
</style>

下面的工作代码：
我添加了一个 class 而不是 ID，因为将样式放入类比为 ID 编写样式更好。

document.querySelector("input").onclick = function() {
  var val = this.value
  this.value = "";
  this.value = val;
  this.style.textAlign = "right";
  this.style.textIndent = "-1000px";
}
document.querySelector("input").onkeydown = function() {
  this.style.textAlign = "auto";
  this.style.textIndent = "0";
}

&lt;input id="beLowerCase" class="align-right" type="Text" value="______________________________232332" /&gt;

希望这能解决您的问题。

更新：

通过 JS 移除样式和添加样式

更新了 js fiddle 链接 - https://jsfiddle.net/hsbea61b/6/

【讨论】：

更新了 jsfiddle 以反映功能。 jsfiddle.net/hsbea61b/3 。还更新了上面的答案。
我有一个 onkeydown 函数。请查看 jsfiddle url：jsfiddle.net/hsbea61b/6。您应该能够基于这种实现方式添加更多功能。希望这会有所帮助。
怪癖是空值元素的占位符也会对齐

【解决方案3】：

您是否尝试过动态添加 CSS

text-align: right;

【讨论】：

【解决方案4】：

使用这个函数代替原生的 setSelectionRange ：

  function setSelectionRange(input, selectionStart, selectionEnd) {
     if (input.setSelectionRange) {
        input.focus();
        var isChrome = !!window.chrome && !!window.chrome.webstore;
        if (isChrome){
             input.style.textIndent = "-1000px";
             input.onblur =function(){
                input.style.textIndent = "0px";
             };
             window.setTimeout(function() {
               input.setSelectionRange(selectionStart, selectionEnd);
             }, 0);
       }else
            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();
      }
}

事实上，兼容性问题是 Chrome 39 中修复的一个bug。所以而不是：

input.onclick = function (){
  this.setSelectionRange(this.value.length,this.value.length )
}

你将使用：

input.onclick = function (){
      setSelectionRange(this,this.value.length,this.value.length )
}

这是我测试过的fiddle。

【讨论】：

在 chrome 中这项工作与我的示例相同，因为使用 setSelectionRange。
是的，很抱歉我忘记了最重要的部分，看看我的编辑
对不起，我之前没有很好地理解您的需求，请看我的编辑
行为i.stack.imgur.com/6UAPn.jpg这个演示jsfiddle.net/hsbea61b/4
是的，那是在我编辑之前，但现在看，它可以让您在点击后看到 chrome 中输入的结尾：jsfiddle