这是我的小jquery插件,在输入时用其他符号替换每个英文符号。这里的一切都运行正常,除非我输入一个长字,比输入本身长,光标越过输入,字的最后部分是不可见的。只需访问下面的链接并键入一些内容(没有空格),你就会得到我的意思。
有没有解决方法可以解决这个问题?
答案 0 :(得分: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,你可以删除它。