如何在使用JavaScript键入时动态关闭括号？

Question

除了询问如何配置文本编辑器的设置外,我在这里看到了有关同一问题的问题.我想知道如何在浏览器中使用JavaScript在input元素或textarea元素中执行此操作.

若要展开多一点,在打字时,如果用户按下(,<,{,或[我想JavaScript来自动把封闭元件),>,},]根据一个类型,最好是速度不够快,加上之前的用户可能输入其他字符.

我不是那种经验丰富的JavaScript,所以我来这里寻求帮助.这是我尝试过的:

$(".editable").keydown(function(e) {
    if(e.which == 219) { // open bracket
        $(".editable").val() += "]"; // close bracket
    }
});

但它会引发一个错误Invalid left-hand assignment另外,这似乎是一个问题,可能有一个更有效/优雅的解决方案/方法,我尝试了什么？任何帮助将非常感激.

的jsfiddle

Answer 1

要修复语法错误,请更改

$(".editable").val() += "]"; // close bracket

至

$(".editable").val($(".editable").val()+"]"); // close bracket

但这是一个廉价的解决方案

• 将更改应用于所有.editable输入,而不仅仅是您键入的输入
• 不考虑光标的位置(您可以键入除结尾之外的其他位置)
• 在值更改之前执行(在keydown上)

这是一个更好的版本,也将光标放在括号之间,并使用括号和大括号:

(function(){
    function insertInto(str, input){
        var val = input.value, s = input.selectionStart, e = input.selectionEnd;
        input.value = val.slice(0,e)+str+val.slice(e);
        if (e==s) input.selectionStart += str.length - 1;
        input.selectionEnd = e + str.length -1;
    }
    var closures = {40:')',91:']', 123:'}'};
    $(".editable").keypress(function(e) {
        if (c = closures[e.which]) insertInto(c, this);
    });
})();

我keypress用来更好地处理键组合(在某些键盘上,keyup不容易区分[和{).我已将所有内容放入IIFE以避免污染外部命名空间.

示范