将光标移到输入的末尾

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" />

​

Answer 1

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

input.scrollLeft = input.scrollWidth;

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小提琴链接- https://jsfiddle.net/hsbea61b/6/

Answer 3

您是否尝试动态添加CSS？

text-align: right;