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

Question

除了询问如何为文本编辑器配置设置之外，我在这里看到过关于同样问题的问题。我想知道如何在浏览器中使用 input 中的 JavaScript 来执行此操作元素或textarea 元素。

为了扩大一点，在打字时，如果用户按下 (、<、{ 或 [ 我希望 JavaScript 自动放置一个结束元素 )、>、@ 987654330@, ] 根据键入的那个，最好在用户可能键入另一个字符之前足够快地添加它。

我对 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 中，以避免污染外部命名空间。

Demonstration

Answer 2

由于我们知道您将针对许多可能的击键应用此方法，因此我建议您将 keydown 回调函数转换为 switch：

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

http://jsfiddle.net/jhfrench/D9g3F/的演示