Question

当按下不可打印的字符时，它会替换为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());
    }
});

问题是当用户按退格键时，第二个输入必须反映第一个输入的内容，因此必须像任何其他字符一样立即删除“[CTRL]”。

Answer 1

您可以在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) + "]");
        }
    }
});

Fiddle

Answer 2

您可以使用keyCode和/或与charCode结合使用（如果需要）。基本想法是：

创建数组/对象中所有必需键码的地图
处理说keydown的事件并侦听键码
在地图中查找密钥代码，如果找到则显示
阻止默认设置（以阻止例如退格回访）
如果在地图中找不到，请让角色像往常一样。

一个非常基本的例子：

演示：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 (that simple solution)，我们在这里使用：

$('#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 3

你总是可以使用正则表达式。

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

fiddle

修改：combined with abhitalks code

使用不可打印的字符（如CTRL，ALT或shift键）镜像输入内容

3 个答案:

Fiddle

编辑:(根据评论）