输入是否在键入问题时替换了字符？ [英] input to have replaced characters on typing issue?

问题描述

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

There is an issue in the following fiddle link as it shows the characters which are typed first and then it converts into the other characters,

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

So is there any way that the typed characters won't show first and directly the replaced characters will only show?

因为它现在很难看：

JS小提琴链接： 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" />

推荐答案

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

The use of keyup event is not really good in this case because the keyup is trigger, like the name says, on key up––after the letter is inserted and becomes visible in the textbox.

使用输入事件。这将捕获其他事件（例如粘贴，剪切，使用鼠标删除等）：

Use the input event. This will catch other events (such as paste, cut, delete using the mouse etc):

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

另一个问题是keyup没有捕获鼠标文本粘贴。因此，如果您复制 a 并右键单击并粘贴输入中的文本，它将无法正确替换。只要在输入中更改了值，就会触发输入事件。

Another problem is that the keyup does not catch mouse text paste. So, if you copy a and right click and paste the text in your input, it won't get replaced correctly. The input event is triggered whenever the value is changed in the input.

此外，您可以更改代码，所以看起来好多了：

Also, you can change the code, so it will look much better:

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" />

这篇关于输入是否在键入问题时替换了字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！