在自定义文本区域中显示插入符号而不显示其文本
Show a caret in a custom textarea without displaying its text
>我有一个自定义文本区域。在此示例中,它随机使字母变为红色或绿色。
var mydiv = document.getElementById('mydiv'),
myta = document.getElementById('myta');
function updateDiv() {
var fc;
while (fc = mydiv.firstChild) mydiv.removeChild(fc);
for (var i = 0; i < myta.value.length; i++) {
var span = document.createElement('span');
span.className = Math.random() < 0.5 ? 'green' : 'red';
span.appendChild(document.createTextNode(myta.value[i]));
mydiv.appendChild(span);
}
};
myta.addEventListener('input', updateDiv);
body { position: relative }
div, textarea {
-webkit-text-size-adjust: none;
width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
font: 1rem sans-serif;
padding: 2px;
margin: 0;
border-radius: 0;
border: 1px solid #000;
resize: none;
}
textarea {
position: absolute;
top: 0;
color: transparent;
background: transparent;
}
.red { color: #f00 }
.green { color: #0f0 }
<div id="mydiv"></div>
<textarea id="myta" autofocus=""></textarea>
有一个输出div,上面有一个文本区域。因此,文本区域不会覆盖其下方的任何彩色内容,其颜色和背景设置为透明。这里一切都有效,除了插入符号(用户代理提供的闪烁光标)是透明的。
有没有办法在不使文本区域的文本可见的情况下显示插入符号?
如果我在文本区域上方制作div 并给它pointer-events: none
,文本区域仍然在下面可见。这种安排也使平滑滚动变得困难,因此对我不起作用。
只需插入您自己的插入符号!
function blink() {
document.getElementById('caret').hidden ^= 1;
blinkTimeout = setTimeout(blink, 500);
}
var mydiv = document.getElementById('mydiv'),
myta = document.getElementById('myta'),
blinkTimeout = setTimeout(blink, 500),
lastSelectionStart = 0,
lastSelectionEnd = 0,
whichSelection = true;
function updateDiv() {
var fc;
while (fc = mydiv.firstChild) mydiv.removeChild(fc);
if (myta.selectionStart != lastSelectionStart) {
lastSelectionStart = myta.selectionStart;
whichSelection = false;
}
if (myta.selectionEnd != lastSelectionEnd) {
lastSelectionEnd = myta.selectionEnd;
whichSelection = true;
}
var cursorPos = whichSelection ? myta.selectionEnd : myta.selectionStart;
for (var i = 0; i < myta.value.length; i++) {
if (i == cursorPos) {
var caret = document.createElement('span');
caret.id = 'caret';
caret.appendChild(document.createTextNode(''xA0'));
mydiv.appendChild(caret);
clearTimeout(blinkTimeout);
blinkTimeout = setTimeout(blink, 500);
}
var span = document.createElement('span');
span.className = Math.random() < 0.5 ? 'green' : 'red';
span.appendChild(document.createTextNode(myta.value[i]));
mydiv.appendChild(span);
}
if (myta.value.length == cursorPos) {
var caret = document.createElement('span');
caret.id = 'caret';
caret.appendChild(document.createTextNode(''xA0'));
mydiv.appendChild(caret);
clearTimeout(blinkTimeout);
blinkTimeout = setTimeout(blink, 500);
}
};
myta.addEventListener('input', updateDiv);
myta.addEventListener('focus', updateDiv);
myta.addEventListener('mousedown', function() {
setTimeout(updateDiv, 0);
});
myta.addEventListener('keydown', function() {
setTimeout(updateDiv, 0);
});
myta.addEventListener('blur', function() {
document.getElementById('caret').hidden = true;
clearTimeout(blinkTimeout);
});
body { position: relative }
div, textarea {
-webkit-text-size-adjust: none;
width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
font: 1rem sans-serif;
padding: 2px;
margin: 0;
border-radius: 0;
border: 1px solid #000;
resize: none;
}
textarea {
position: absolute;
top: 0;
color: transparent;
background: transparent;
}
.red { color: #f00 }
.green { color: #0f0 }
#caret {
display: inline-block;
position: absolute;
width: 1px;
background: #000;
}
#caret[hidden] { display: none }
<div id="mydiv"><span id="caret"> </span></div>
<textarea id="myta" autofocus=""></textarea>
我在这里插入了一个<span>
#caret
插入到div 中,通过使用 JS 切换其隐藏属性,它每 500 毫秒闪烁一次。为了复制浏览器行为,我必须检测插入符号实际所在的selectionStart
还是selectionEnd
,并在输入文本时使其保持稳定。
当跨度不是固定长度或嵌套时,这有点难实现,但它比摆弄内容更容易使用更复杂的荧光笔进行编辑。此函数会将插入符号插入正确的位置:
function insertNodeAtPosition(node, refNode, pos) {
if (typeof(refNode.nodeValue) == 'string') refNode.parentNode.insertBefore(node, refNode.splitText(pos));
else {
for (var i = 0; i < refNode.childNodes.length; i++) {
var chNode = refNode.childNodes[i];
if (chNode.textContent.length <= pos && i != refNode.childNodes.length - 1) pos -= chNode.textContent.length;
else return insertNodeAtPosition(node, chNode, pos);
}
}
}
用法(其中i
是插入它的位置):
var caret = document.createElement('span');
caret.id = 'caret';
caret.appendChild(document.createTextNode(''xA0'));
insertNodeAtPosition(caret, mydiv, i);
clearTimeout(blinkTimeout);
blinkTimeout = setTimeout(blink, 500);
为什么不简单地使用<div contenteditable="true"></div>
而不是<textarea></textarea>
?。有了这个,您不需要额外的textarea
.在此处查看演示。
.HTML:
<div id="myta" autofocus="" contenteditable="true"></div>
JavaScript:
var myta = document.getElementById('myta');
function updateDiv() {
var fc;
var text = myta.innerText || myta.textContent;
while (fc = myta.firstChild) myta.removeChild(fc);
for (var i = 0; i < text.length; i++) {
var span = document.createElement('span');
span.className = Math.random() < 0.5 ? 'green' : 'red';
span.appendChild(document.createTextNode(text[i]));
myta.appendChild(span);
}
placeCaretAtEnd(myta);
};
myta.addEventListener('input', updateDiv);
另外,当您将新文本放入div
中时,为了在末尾移动插入符号,我从这个答案中使用了该功能:
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
相关文章:
- 为什么在页面上单击的先前链接的文本显示在 AJAX 请求中
- JavaScript NaN错误,输入文本显示为NaN
- 关于socket.io实时文本显示的问题
- 如何使用javascript使文本显示在文本字段中
- 在它们之间切换时,jQuery 文本显示在活动文本下方
- 使用 ajax 乱码文本显示图像
- 带有文本显示js功能的图像映射 - 某些部分不显示
- 来自 Ajax 请求的文本显示不正确
- 如何使用 JavaScript 使文本显示
- 是否可以将元素内部的文本显示在 ::在 css 之前
- on更改文本框的文本显示在另一个文本框上
- 在文本显示在Scroll上之前在页面上隐藏文本的问题
- 使用带文本显示的Jquery切换文本
- 如何使文本显示速度变慢
- 如何将图片添加到点击计数器文本显示<图像><点击量>
- 文本显示有延迟
- 根据在另一个文本框中输入的文本显示文本框中的文本
- 如何从点击文本显示文件浏览器,并在悬停文本时将鼠标光标更改为指针
- 使文本显示为几行可点击的线条
- 如何使文本显示