Mirroring input content with non-printable chars like CTRL, ALT or shift key

Question

When non-printable char is pressed, it's replaced with let's say for CTRL=17 with "[CTRL]". Here is code an example

$('#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());
    }
});

the problem is when user presses backspace the second input must reflect the content of the first one, so "[CTRL]" must be deleted at once like any other chars.

Answer 1

You could make use of the keyCode and/or in combination with charCode (if required). Basic idea would be:

1. Create a map of all required key codes in an array/object
2. Handle event for say keydown and listen for keycode
3. Look for the keycode in your map and if found show it
4. prevent the default (to prevent e.g. say backspace browsing back)
5. If not found in map, let the character go thru as usual.

A very basic example:

Demo: http://jsfiddle.net/abhitalks/L7nhZ/

Relevant 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
});

Edit: (as per the comments)

The concept remains the same, just copying the value to the second input:

Demo 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
});

Regarding deletion of the description, I could not get it done by caching the last inserted descrition from the map. Somehow, I kept struggling with the regex with a variable. Anyway, a simpler solution is to just add another event handler for keyup with hard-coded map.

Thanks to @serakfalcon for (that simple solution), which we are using here:

$('#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());
    }
});

Answer 2

You can check in the keydown for the last character in the input field. If it's a ] you can remove everything from the right to the last found opening bracket [. Unfortunatly this does not work if you're cursor is inside '[ ]'.

$('#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) + "]");
        }
    }
});

Fiddle

Answer 3

you can always use a regex.

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

fiddle

Edit: combined with abhitalks code