输入是否在键入问题时替换了字符？

Question

在下面的小提琴链接中存在一个问题,因为它显示首先键入的字符然后转换为其他字符,

那么有没有办法让键入的字符不会首先显示,直接替换的字符只会显示？

因为它现在很难看:

JS Fiddle Link: https ://jsfiddle.net/moxet/z73m771p/

$("#pashto").keyup(function(event) { 
    var car = $(this).val(); 
    car = car.replace("a", "?");
    car = car.replace("A", "?");
    car = car.replace("b", "?");
    car = car.replace("B", "");
    car = car.replace("c", "?");
    car = car.replace("C", "?");
    car = car.replace("d", "?");
    car = car.replace("D", "?");
    car = car.replace("e", "?");
    car = car.replace("E", "?");
    car = car.replace("f", "?");
    car = car.replace("F", "");
    car = car.replace("g", "?");
    car = car.replace("G", "?");
    car = car.replace("h", "?");
    car = car.replace("H", "?");
    car = car.replace("i", "?");
    car = car.replace("I", "?");
    car = car.replace("j", "?");
    car = car.replace("J", "?");
    car = car.replace("k", "?");
    car = car.replace("K", "?");
    car = car.replace("l", "?");
    car = car.replace("L", "");
    car = car.replace("m", "?");
    car = car.replace("M", "");
    car = car.replace("n", "?");
    car = car.replace("N", "?");
    car = car.replace("o", "?");
    car = car.replace("O", "?");
    car = car.replace("p", "?");
    car = car.replace("P", "?");
    car = car.replace("q", "?");
    car = car.replace("Q", "?");
    car = car.replace("r", "?");
    car = car.replace("R", "?");
    car = car.replace("s", "?");
    car = car.replace("S", "?");
    car = car.replace("t", "?");
    car = car.replace("T", "?");
    car = car.replace("u", "?");
    car = car.replace("U", "?");
    car = car.replace("v", "?");
    car = car.replace("V", "?");
    car = car.replace("w", "?");
    car = car.replace("W", "?");
    car = car.replace("x", "?");
    car = car.replace("X", "?");
    car = car.replace("y", "?");
    car = car.replace("Y", "?");
    car = car.replace("z", "?");
    car = car.replace("Z", "?");
    car = car.replace("?", "?");
    car = car.replace(";", "?");
    car = car.replace("0", "?");
    car = car.replace("1", "?");
    car = car.replace("2", "?");
    car = car.replace("3", "?");
    car = car.replace("4", "?");
    car = car.replace("5", "?");
    car = car.replace("6", "?");
    car = car.replace("7", "?");
    car = car.replace("8", "?");
    car = car.replace("9", "?");
    $(this).val(car);
   });

#pashto
{
    direction:rtl;
    text-align:right;
    font-size:20px;
    padding:5px;   
}

<input type="text" id="pashto" />

Answer 1

keyup在这种情况下,事件的使用并不是很好,因为在keyup插入字母并在文本框中显示后,键盘上的触发器就像名称所示.

使用该input活动.这将捕获其他事件(例如粘贴,剪切,使用鼠标删除等):

$("#pashto").on("input", function(event) { 
  ...
});

另一个问题是keyup没有捕获鼠标文本粘贴.因此,如果您复制a并右键单击并粘贴输入中的文本,则无法正确替换它.该input每当值改变输入时被触发的事件.

此外,您可以更改代码,因此它看起来会更好:

var replacements = [
    ["a", "?"], ["A", "?"], ["b", "?"], ["B", ""], ["c", "?"],
    ["C", "?"], ["d", "?"], ["D", "?"], ["e", "?"], ["E", "?"],
    ["f", "?"], ["F", ""], ["g", "?"], ["G", "?"], ["h", "?"],
    ["H", "?"], ["i", "?"], ["I", "?"], ["j", "?"], ["J", "?"],
    ["k", "?"], ["K", "?"], ["l", "?"], ["L", ""], ["m", "?"],
    ["M", ""], ["n", "?"], ["N", "?"], ["o", "?"], ["O", "?"],
    ["p", "?"], ["P", "?"], ["q", "?"], ["Q", "?"], ["r", "?"],
    ["R", "?"], ["s", "?"], ["S", "?"], ["t", "?"], ["T", "?"],
    ["u", "?"], ["U", "?"], ["v", "?"], ["V", "?"], ["w", "?"],
    ["W", "?"], ["x", "?"], ["X", "?"], ["y", "?"], ["Y", "?"],
    ["z", "?"], ["Z", "?"], ["?", "?"], [";", "?"], ["0", "?"],
    ["1", "?"], ["2", "?"], ["3", "?"], ["4", "?"], ["5", "?"],
    ["6", "?"], ["7", "?"], ["8", "?"], ["9", "?"]
].map(function (c) {
    // Escape the special characters
    var escaped = c[0].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    
    // And then convert into regular expression
    c[0] = new RegExp(escaped, "g");
    return c;
});

$("#pashto").on("input", function(event) {
    var car = $(this).val();
    
    // Now, simply replace by regular expressions
    replacements.forEach(function (c) {
        car = car.replace(c[0], c[1]);
    });
    $(this).val(car);
});

#pashto {
  direction: rtl;
  text-align: right;
  font-size: 20px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="pashto" />