javascript - 使用热键和 javascript 在文本区域中附加文本

Question

我有 4 个输入文本标签和 4 个文本区域标签，我需要创建一些热键，例如 Ctrl+n、Ctrl+r 和 Ctrl+o，以便在所有文本字段的光标位置附加预定义单词。

我得到了这个脚本，但仅适用于 onclick 事件，所以我只想向用户显示一次文本(按 Ctrl+n 表示 word1，按 Ctrl+r 表示 word2，按 Ctrl+o 表示 word3)，然后他无论他在哪个字段，每次输入一些文本时都可以插入这些单词。

    <script>
    function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("txt1").value += targ.textContent || targ.innerText;
    }
    </script>
    <div onclick="addText(event)">word1</div>
    <div onclick="addText(event)">word2</div>
    <div onclick="addText(event)">word3</div>

        <label><b>Text 1: </b></label><br>
        <textarea rows="20" cols="80" id = "txt1" name="txt1"></textarea>

        <label><b>Text2: </b></label>
        <input type="text" size="69" name="txt2" value="">

Answer 1

你可以使用这样的东西。
请注意，我故意使用了未充分利用的按键，因为某些控制键组合仅供浏览器使用，并且无法被网页中的客户端 JavaScript 拦截(例如 ctrl+N 或 ctrl+T)。

const arrKey = ['a', 'l', 'b'],
  arrVal = ['addedA', 'addedL', 'addedB'];

function addText(event) {
  if (event.target.classList.contains("addtext")) {
    const index = arrKey.indexOf(event.key);
    if (event.ctrlKey && index != -1) {
      event.preventDefault();
      insertAtCaret(event.target, arrVal[index]);
    }
  }
}

function insertAtCaret(el, text) {
  const caretPos = el.selectionStart,
    textAreaTxt = el.value,
    newCaretPos = caretPos + text.length;

  el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
  el.setSelectionRange(newCaretPos, newCaretPos);
};

document.addEventListener('keydown', addText);

<label><b>Text 1: </b></label><br>
<textarea placeholder="Try ctrl+a or ctrl+b" rows="10" cols="40" id="txt1" name="txt1" class="addtext"></textarea><br/>
<label><b>Text 2: </b></label><br/>
<input type="text" size="40" name="txt2" class="addtext" value=""><br/>
<label><b>Text 3: </b></label><br>
<textarea rows="10" cols="40" id="txt3" name="txt1" class="addtext"></textarea><br/>
<label><b>Text 4: </b></label><br/>
<input type="text" size="40" name="txt4" class="addtext" value="">