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

时间:2014-01-16 15:12:13

标签: javascript jquery html autocomplete

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

要进一步展开,在键入时,如果用户按下textarea(<{,我希望JavaScript自动设置结束元素{ {1}},[)>根据输入的类型,最好足够快,以便在用户可能输入其他字符之前添加它。

我不是 对JavaScript有经验,所以我来这里寻求帮助。这是我尝试过的:

}

但是它会抛出一个错误无效的左手赋值此外,这似乎是一个问题,它可以有一个更有效/优雅的解决方案/方法,我尝试了什么?任何帮助将不胜感激。

jsFiddle

2 个答案:

答案 0 :(得分:8)

要修复语法错误,请更改

$(".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

答案 1 :(得分:1)

由于我们知道您将使用此方法进行多次可能的击键,因此我建议您将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/

演示