Question

我正在编写一个像在线代码编辑器这样的Web应用程序。其中一个基本功能是，当用户输入左括号符号“（”，编辑器会自动添加正确的“）”时。< / p>

所以一个直接的想法是我为此创建一个对象，定义如下：

var pairCharData = {
    "{": "}",
    "(": ")",
    "\"":"\"",
    "'":"'"
};

那不是结束。我希望编辑器更智能，所以它应该在必要时跳过输入。例如，当我在编辑器中输入一个右括号符号后，我刚刚添加一个左括号（当时，右括号已经存在！），编辑器应该只移动光标但不显示一个重复的一个

所以我想检查下一个用户输入字符是否是预期的字符我创建了另一张地图如下：

var pairCharDataReverse = {
    "}": "{",
    ")": "(",
    "\"":"\"",
    "'":"'"
};

这就是第一张地图的反向版本。我的想法是跟踪用户的输入密钥。这是我的实现

if(key in pairCharDataReverse) {
var leftPair = pairCharDataReverse[key];
if(this.lastKey === leftPair) {
    this.selectionStart = this.selectionEnd = start +1;
    e.preventDefault();
}

当我添加更多对字符时，我必须修改两个地图，这不是我想要的我想必须有另一种更好的方法来存储数据，减少痛苦。也许使用其他数据结构，或者我只是想知道一个技巧。

Answer 1

您可以使用<select>元素，其中<option>元素对应于用户选择的字符以包含文本。用户选择文字，用户选择<option>，javascript执行包含所选<option> .value中所选文字的操作。

＆＃13;

var textarea = document.querySelector("textarea");
var select = document.querySelector("select");
var text;
select.onchange = function(e) {
  if (text) {
    var option = this.value.split("");
    textarea.value = textarea.value.slice(0, text[0]) 
                     + option[0] 
                     + textarea.value.slice(text[0], text[1])
                     + option[1]
                     + textarea.value.slice(text[1]);
  }
  this.value = text = null;
}
textarea.onselect = function(e) {
  text = [this.selectionStart, this.selectionEnd]
}

＆＃13;

<select>
  <option></option>
  <option value="()">()</option>
  <option value="[]">[]</option>
  </select><br>
<textarea></textarea>

＆＃13;

JavaScript - 在代码编辑器需要时跳过输入的更好方法是什么？

1 个答案: