我在内容可编辑的<div>中有一些单词，其颜色必须与文本的其余部分不同。问题是我不希望用户能够使用其他颜色样式，而他们仍然应该能够删除蓝色单词。
<div id="textarea" contenteditable>Hello world<span style="color: blue">!</span>
</div>
用户输入是否不受颜色样式影响？
如何使用户输入不受跨度元素颜色样式的影响
•
问答
yjygxy123 回答：如何使用户输入不受跨度元素颜色样式的影响
与其将整个DIV设为可编辑状态，不如将其分成多个跨度，以便您可以指定各个可编辑性。
<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>
</div>,
您还没有为我们提供足够的继续服务-例如。有什么规则确定什么是蓝色，什么不是蓝色？蓝色文字始终是感叹号吗？它总是到最后吗？
听起来您将需要构建一个简单的轻量级代码编辑器并应用所需的规则。这种工作方式是在与“显示” div相同的空间中创建一个透明的可编辑div。可编辑文本区域的内容不可见，而“ display” div的内容可见。对于每个按键，您都将获取可编辑文本区域的内容，并将其写入“ display” div，然后应用所有自定义规则。这是一个简单的小提琴，显示了我的意思：
https://jsfiddle.net/ymdrfupb/1/
const editable = document.querySelector('.editor > [contenteditable]');
const display = document.querySelector('.editor > .display');
function setDisplayContent(text) {
// wrap any non-alphanumeric trailing characters with a blue span
display.innerHTML = text.replace(/([^\w]+)$/,'<span class="blue">$1</span>');
}
editable.addEventListener('input',(ev) => {
setDisplayContent(ev.target.innerHTML);
});
setDisplayContent(editable.innerHTML);