在textarea或contenteditable div中键入TAB时检测最后写入的单词 [英] Detect the last written word when typing TAB in a textarea or contenteditable div
问题描述
textarea
或contenteditable 中按下 TAB 时如何检测并选择最后写入的单词div
? 我开始用写入或按键的最后一个字符的缓冲区来做,但后来我注意到有多个案例: 假设用户写入 H E → → û BACKSPACE 0 用户使用箭头键移动 用户可以用 SPACE 分隔单词这就是我使用的),但也 ENTER 或逗号等。
有一个很好的方法来检测最后的文字?
目标:为自动完成功能编码,例如: thx +< TAB> code> =>文本被替换为非常感谢你。
$ c> textarea 和 contenteditable
div:
< div contenteditable> Hello ,按Tab键替换这个WORD< br>在此ONE之后也按TAB< / div>< textarea rows =8cols =50id =a>您好,按Tab键替换此WORDA并按TAB在此之后< / textarea>
How to detect and select the last written word when TAB is pressed in a textarea
or contenteditable div
?
I started to do it with a buffer of the last characters written or key-presses, but then I noticed that there are multiple corner cases:
let's say the user writes HELLUBACKSPACEO
the user moves with arrow keys
the user can separate words with SPACE (that's what I was using) but also ENTER or a comma, etc.
Is there a nice way to detect the last written word?
Goal: to code an autocomplete feature, example: thx + <TAB>
=> Text is replaced by "Thank you very much."
This totally works for textarea
and for contenteditable
div:
var newText = 'hello\nnewline';
var newHtml = '<b>test</b> and<br>a <a href="hjkh">link</a>';
document.addEventListener("keydown", function(e) {
var elt = e.target;
if (elt.tagName.toLowerCase() === 'textarea' || elt.isContentEditable)
{
if (e.keyCode == 9) {
e.preventDefault();
if (elt.isContentEditable) { // for contenteditable
elt.focus();
sel = document.getSelection();
sel.modify("extend", "backward", "word");
range = sel.getRangeAt(0);
console.log(range.toString().trim());
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = newHtml;
var frag = document.createDocumentFragment(), node;
while (node = el.firstChild) {
frag.appendChild(node);
}
range.insertNode(frag);
range.collapse();
} else { // for texterea/input element
var endingIndex = elt.selectionStart;
var startingIndex = endingIndex && endingIndex - 1;
var value = elt.value;
var regex = /[ ]/;
while (startingIndex > -1) {
if (regex.test(value[startingIndex])) {
++startingIndex;
break;
}
--startingIndex;
}
if (startingIndex < 0) {
startingIndex = 0;
}
value = value.substring(0, startingIndex) + newText + value.substring(endingIndex);
var cursorPosition = startingIndex + newText.length;
e.target.value = value;
e.target.setSelectionRange(cursorPosition, cursorPosition);
}
}
}
});
<div contenteditable>Hello, press TAB to replace this WORD<br>Also press TAB after this ONE</div>
<textarea rows="8" cols="50" id="a">Hello, press TAB to replace this WORD
Also press TAB after this ONE</textarea>
这篇关于在textarea或contenteditable div中键入TAB时检测最后写入的单词的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!