将光标移动到输入的末尾。

Question

这是一个小型的 jQuery 插件，可以在键入时将每个英文字母替换成其他符号。除了当我输入一个比输入框还要长的单词时，光标会跑到输入框外面，导致单词的最后一部分看不见，其他都能正常工作。请点击下方链接并输入一些内容（不含空格），你就知道我的意思了。 http://jsfiddle.net/beLMf/ 有没有办法解决这个问题？

- King Julien

---

光标在末尾。你的意思是保持文本的顶部可见。 - Joseph

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，您可以删除它。

- Ekim

---

从你的代码看，这似乎没有解决问题。 - Daedalus

是的，你说得对，我已经更新了这个示例，加入了可运行的代码。http://jsfiddle.net/beLMf/6/ - Ekim

你说得对：)) 无论如何，那是一个很棒的答案，谢谢帮助！ - King Julien