javascript - 输入在打字问题上替换字符？

Question

以下 fiddle 链接存在问题，因为它显示先输入的字符，然后转换为其他字符，

那么有什么办法可以让输入的字符不先显示，而直接只显示替换的字符呢？

因为现在很丑:

JS fiddle 链接: 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" />