使用热键和 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+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="">
【讨论】:
抱歉,只是在文本末尾添加。你能告诉如何附加光标所在的任何地方吗?谢谢 @KonradSoares 不客气 :)。编辑答案以插入插入符号位置,并恢复附加文本后的位置。以上是关于使用热键和 javascript 在 textarea 中附加文本的主要内容,如果未能解决你的问题,请参考以下文章