jquery - 用 jQuery 实时替换输入

Question

我的脚本有问题，我想用字段中的特定字母实时替换输入字段中输入的任何内容Hello World。

 <input id="inputID" type="text" value="" maxlength="11"/>
 $('#inputID').keyup(function(e){
  var cv=["h","e","l","l","o"," ","w","o","r","l","d",""];

  var i=$('#inputID').val();

  for (j=0;j<11;j++){

    this.value = this.value.replace(i[j],cv[j]);

}

});

当我写得很慢时，这个脚本效果很好，但当我写得很快时就不行了。感谢您的帮助

Answer 1

试试这种方式：

$('#inputID').keyup(function(e){
     var cv = 'hello world';
     this.value = cv.substr(0, this.value.length);
});

请参阅工作演示。

Answer 2

xdazz 的解决方案是正确的（他打败了我）

我认为展示一个根本不依赖 jQuery 的解决方案可能会有好处，因此不想依赖它的用户也可以从中受益。

 document.getElementById('inputID').onkeyup = function () {
     var cv = "hello world"; // Your 'correct value' 
     //Set the value to a substring of cv at the current length
     this.value = cv.substring(0, this.value.length); 
 };

http://jsfiddle.net/9yfCe/

Answer 3

这与在 keyup 上维护事件一样快：

var hw = "hello world";
$('#inputID').keyup(function(e){
    this.value = hw.substring(0, this.value.length);
});

演示

编辑：我很惊讶三个人想出了几乎完全相同的解决方案。真的很酷。

编辑 2：我对其进行了一些调整，使其用空格替换最初键入的字符，以帮助减轻被替换字母的影响。

var hw = "hello world";
$('#inputID').keydown(function (e) {
    if (e.which !== 8) { // allow backspace
        e.preventDefault();
        this.value += ' ';
    }
}).keyup(function () {
    this.value = hw.substring(0, this.value.length);
});

第二个演示

Answer 4

vanilla Javascript 这很快就会与许多事件混淆。

jQuery 在队列中为您安排动作，以便它们在适当的范围内执行。

$('#inputID').keyup(function(e){
  var cv=["h","e","l","l","o"," ","w","o","r","l","d",""];

  var i=$('#inputID').val();

  for (j=0;j<11;j++){

    $(this).val($(this).val().replace(i[j],cv[j]));

}
});

小提琴：http: //jsfiddle.net/Xedus129/MenpW/