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

除了询问如何配置文本编辑器的设置外，我在这里看到了与此相同的问题。我想知道如何在浏览器中使用

input

元素或

textarea

元素中的JavaScript来实现这一点

要进一步展开，在键入时，如果用户根据键入的字符按

（

，

，

}

，

]

，最好快到足以在用户可能键入另一个字符之前添加它

我对JavaScript没有太多经验，所以我来这里寻求帮助。以下是我尝试过的：

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

但它也会抛出一个错误无效的左手分配，这似乎是一个问题，可以有一个更有效/优雅的解决方案/方法来实现我的尝试？任何帮助都将不胜感激

---

要修复语法错误，请更改

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

到

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

• 将更改应用于所有可编辑的输入，而不仅仅是您键入的输入
• 不考虑光标的位置（可以在端点以外的其他位置键入）
• 在更改值之前（按下键时）执行操作

这里有一个更好的版本，也将光标放在括号之间，并处理括号和花括号：

(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

来更好地处理组合键（在某些键盘上，

keypup

不容易区分

[

和

{

）。我把所有东西都放在一个iLife中，以避免污染外部名称空间

---

因为我们知道您将对许多可能的击键应用此方法，所以我建议将您的按键回调函数转换为

开关

：

$(".editable").keydown(function(e) {    
switch(e.which) {
    case 219: //open curly bracket
                this.value += '}';
        break;
    case 188: //less than
             this.value += '>';
        break;
    }
});

---

演示时，您应该删除第一个解决方案，因为如果页面上有多个

.editable

元素，则该解决方案存在严重缺陷。或者至少用

$（this.val（）+']'）替换它；

val（）接受函数作为参数，使用它会更好，但我想您知道；

$（.editable”）.val（函数（）{returnthis.value+“]”}）；

但是“您的更好”版本更适合sure@JaceCotton不，没关系，事实上我也有同样的想法，见演示：）@JaceCotton新版本更具可扩展性，以防万一；）随着jsbin.com的关闭，我做了这样一件事：我问的所有朋友都工作得很好这在我的键盘上不起作用：如果我键入a[，它会放一个}。请参阅我的答案以了解解释。

$(".editable").keydown(function(e) {    
switch(e.which) {
    case 219: //open curly bracket
                this.value += '}';
        break;
    case 188: //less than
             this.value += '>';
        break;
    }
});