使用热键和 javascript 在 textarea 中附加文本

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="">

使用热键和 javascript 在 textarea 中附加文本

appending text in textarea with hotkeys and javascript

javascript

hotkeys