Question

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

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

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

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

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/

演示

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

2 个答案: