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

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

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