Зеркальное отображение входного содержимого с непечатаемыми символами, такими как CTRL, ALT или Shift.

Когда нажимается непечатаемый символ, он заменяется, скажем, для CTRL=17 на "[CTRL]". Вот пример кода

$('#textbox1').keyup(function (event) {
    if (8 != event.keyCode) {
       if(17==event.keyCode){
        $('#textbox1').val($('#textbox1').val()+"[CTRL]")
        $('#textbox2').val($('#textbox1').val());
       }else{
        $('#textbox2').val($('#textbox1').val());
       }

    } else {

        $('#textbox2').val($('#textbox1').val());
    }
});

проблема в том, что когда пользователь нажимает клавишу Backspace, второй ввод должен отражать содержимое первого, поэтому "[CTRL]" должен быть удален сразу же, как и любые другие символы.

Источник

3 ответа

Решение

Вы могли бы использовать keyCode и / или в сочетании с charCode (если необходимо). Основная идея будет:

  1. Создать карту всех необходимых кодов ключей в массиве / объекте
  2. Обработать событие, скажем keydown и слушать код ключа
  3. Ищите код ключа на своей карте и, если найден, покажите его
  4. запрет по умолчанию (например, для предотвращения возврата, например, возврата на задний план)
  5. Если его нет на карте, пусть персонаж проходит как обычно.

Очень простой пример:

Демо: http://jsfiddle.net/abhitalks/L7nhZ/

Соответствующий JS:

keyMap = {8:"[Backspace]",9:"[Tab]",13:"[Enter]",16:"[Shift]",17:"[Ctrl]",18:"[Alt]",19:"[Break]",20:"[Caps Lock]",27:"[Esc]",32:"[Space]",33:"[Page Up]",34:"[Page Down]",35:"[End]",36:"[Home]",37:"[Left]",38:"[Up]",39:"[Right]",40:"[Down]",45:"[Insert]",46:"[Delete]"};

$("#txt").on("keydown", function(e) {

    // check if the keycode is in the map that what you want
    if (typeof(keyMap[e.keyCode]) !== 'undefined') {

        // if found add the corresponding description to the existing text 
        this.value += keyMap[e.keyCode];

        // prevent the default behavior
        e.preventDefault();
    }

    // if not found, let the entered character go thru as is
});

Редактировать: (согласно комментариям)

Концепция остается прежней, просто копируя значение на второй вход:

Демонстрация 2: http://jsfiddle.net/abhitalks/L7nhZ/3/

$("#txt1").on("keyup", function(e) {
    if (typeof(keyMap[e.keyCode]) !== 'undefined') {
        this.value += keyMap[e.keyCode];
        e.preventDefault();
    }
    $("#txt2").val(this.value); // copy the value to the second input
});

Что касается удаления описания, я не смог сделать это, кэшировав последние вставленные описания с карты. Так или иначе, я продолжал бороться с регулярным выражением с переменной. В любом случае, более простое решение - просто добавить еще один обработчик событий для keyup с жестко закодированной картой.

Спасибо @serakfalcon за (это простое решение), которое мы используем здесь:

$('#txt1').keydown(function(event) {
    if(8 == event.keyCode) {
        var el = $(this);
        el.val(el.val().replace(/\[(Tab|Enter|Shift|Ctrl|Alt|Break|Caps Lock|Esc|Space|Page (Up|Down)|End|Home|Left|Up|Right|Down|Insert|Delete)\]$/,' '));
        $("#txt2").val(el.val());
    }
});
Источник

Вы всегда можете использовать регулярные выражения.

$('#textbox1').keydown(function(event) {
    if(8 == event.keyCode) {
        var el = $(this);
        el.val(el.val().replace(/\[(CTRL|ALT|SHIFT)\]$/,' '));
    }
});

играть на скрипке

Изменить: в сочетании с кодом abhitalks

Источник

Вы можете проверить в keydown для последнего символа в поле ввода. Если это ] Вы можете удалить все справа до последней найденной открывающей скобки [, К сожалению, это не работает, если вы находитесь внутри курсора '[ ]',

$('#textbox1').keydown(function(event) {
    if(8 == event.keyCode) {
        var element = $(this),
            value = element.val(),
            lastChar = value.slice(-1);

        if(lastChar == ']') {
            var lastIndex = value.lastIndexOf('['),
                index = value.length - lastIndex;

            element.val(value.slice(0, -index) + "]");
        }
    }
});

скрипка

Источник
Другие вопросы по тегам