将光标移动到输入的末尾

Question

我遇到了一个与输入和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 )
}

<input id="beLowerCase" type="Text" value="______________________________232332" />

- cyber_ua

---

请看这里：https://dev59.com/Qmgt5IYBdhLWcg3w7BkE - Magicprog.fr

@Magicprog.fr的工作方式与我的示例相同。 - cyber_ua

Answer 1

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

input.scrollLeft = input.scrollWidth;

- cyber_ua

Answer 2

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

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

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

下面是可用的代码：
我已经添加了一个类而不是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";
}

<input id="beLowerCase" class="align-right" type="Text" value="______________________________232332" />

希望这能解决你的问题。

更新:

通过JS移除了样式并添加了样式。

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

- Bala

---

已更新 jsfiddle 以反映功能。https://jsfiddle.net/hsbea61b/3/。还更新了上面的答案。 - Bala

我有一个onkeydown函数，请查看jsfiddle网址：https://jsfiddle.net/hsbea61b/6/。您应该能够根据这种实现方式添加更多功能。希望这可以帮到您。 - Bala

问题在于，如果值为空，则元素的占位符也将对齐。 - netizen

Answer 3

你尝试过动态添加CSS吗？

text-align: right;

- shershen

Answer 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中修复的一个错误。因此，不需要：

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

你将使用：

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

这是我测试过的fiddle。

- rsabir

---

抱歉之前我没有很好地理解你的需求，请看我的编辑。 - rsabir

这个演示 https://jsfiddle.net/hsbea61b/4/ 展示了一个行为 http://i.stack.imgur.com/6UAPn.jpg。 - cyber_ua

是的，那是在我编辑之前的情况，但现在看看它，它允许你在单击后在Chrome中查看输入的结尾：jsfiddle。 - rsabir

https://dev59.com/8JXfa4cB1Zd3GeqPeGPJ#36198715?noredirect=1#comment60034677_36198465 - cyber_ua

由于模糊监听器，它会返回到初始状态。 - rsabir