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

Posted

技术标签:

【中文标题】使用热键和 javascript 在 textarea 中附加文本【英文标题】:appending text in textarea with hotkeys and javascript 【发布时间】:2020-07-09 12:01:05 【问题描述】:

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

【问题讨论】:

Don't use inline handlers,他们有一个疯狂的范围链,需要全局污染,并且有引用转义问题。请改用addEventListener 【参考方案1】:

你可以使用这样的东西。 请注意,我故意使用了未充分使用的键,因为某些控制键组合仅供浏览器使用,无法被网页中的客户端 javascript 拦截(如 ctrl+Nctrl+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="">

【讨论】:

抱歉,只是在文本末尾添加。你能告诉如何附加光标所在的任何地方吗?谢谢 @KonradSoares 不客气 :)。编辑答案以插入插入符号位置,并恢复附加文本后的位置。

以上是关于使用热键和 javascript 在 textarea 中附加文本的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript:实现顺序键盘热键?

这是最好的 Javascript 键盘事件库。(热键,快捷方式)[关闭]

vue使用textare如何正确统计输入字符个数

如何使用 Javascript 访问 iframe 元素?

怎样计算textare文本域的文字个数限制

在 Eclipse 中编辑 *.ftl 文件时如何获得块注释热键功能?