在文本区域中添加带有热键和javascript的文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在文本区域中添加带有热键和javascript的文本相关的知识，希望对你有一定的参考价值。
我有4个输入文本标签和4个textarea标签，我需要创建一些热键，例如Ctrl + n，Ctrl + r和Ctrl + o，以将预定义的单词附加到所有文本字段的光标位置。
我有此脚本，但仅用于onclick事件，所以我只想向用户显示一次文本（对于单词1按Ctrl + n，对于单词2按Ctrl + r，对于单词3按Ctrl + o），那么他可以不论他在哪个字段输入，每次输入一些文本时都要插入这些词。
<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="">
答案
您可以使用类似这样的内容。请注意，我故意使用了未充分利用的键，因为某些控制键组合仅保留供浏览器使用，并且无法被网页中的客户端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的文本的主要内容，如果未能解决你的问题，请参考以下文章