ввод заменить символы при наборе текста?

1

Существует проблема в следующей ссылке скрипта, поскольку она показывает символы, которые сначала набираются, а затем преобразуются в другие символы,

Итак, есть ли способ, которым типизированные символы не будут отображаться первым, а непосредственно замененные символы будут отображаться только?

Как это уродливо сейчас:

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" />
Теги:

2 ответа

7
Лучший ответ

Использование события 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" />
Поделиться
  • 0
    Также есть еще одна проблема, заключающаяся в том, что после ввода чего-либо на входе нельзя изменить его, перемещая курсор к другим символам. Можете ли вы это проверить? Курсор всегда идет до конца, когда вы пытаетесь переместить его из последней позиции в символы заднего ряда.
  • 0
    @UmairShahYousafzai Я бы сказал, чтобы задать новый вопрос для этого. Это очень хитрый, кстати. Вы должны установить положение курсора и сохранить его в переменной.
Показать ещё 1 комментарий
-2 
$("#pashto").keydown(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);
   });
Поделиться
  • 0
    Это не решает проблему, английские буквы все еще появляются.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню