javascript - 将光标移动到输入的末尾

Question

这是我的小 jquery 插件，它在打字时用其他符号替换每个英文符号。在这里一切正常，除了当我输入一个长于输入本身的长单词时，光标移到输入之外，单词的最后一部分不可见。只需访问下面的链接并输入一些内容（没有空格），您就会明白我的意思。

http://jsfiddle.net/beLMf/

有什么解决方案可以解决这个问题吗？

Answer 1

您有两个问题，一个是您始终将文本添加到行尾，即如果它与您要查找的字符匹配。您应该改为在插入符号（光标）位置进行插入：

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});

然后改变你的行：

$this.val( $this.val() + String.fromCharCode( i + 4304 ) );

到

$this.insertAtCaret(String.fromCharCode( i + 4304 ));
$("#switcher").focus();
$(this).focus();

这将解决您的问题并解决编辑字符串任何部分的问题。

更新：要更新光标位置，我们必须将焦点移开，然后再回到元素

我对jsFiddle进行了更改，还有一个捕获光标位置的功能，我想用它来解决您的问题。它只是输出到 console.log，你可以删除它。