如何使用户输入不受跨度元素颜色样式的影响

Question

我在可编辑的内容中有一些单词<div>需要与文本的其余部分使用不同的颜色。问题是我不希望用户能够使用不同的颜色样式，他们仍然应该能够删除蓝色单词。<div id="textarea" contenteditable>Hello world<span style="color: blue">!</span> </div>用户的输入是否可能不受颜色样式的影响？

Answer 1

不是使整个 DIV 可编辑，而是将其分解为单独的跨度，以便您可以指定单个可编辑性。

<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>

</div>

Answer 2

你还没有真正提供足够的东西让我们继续 - 例如。什么是蓝色，什么不是？蓝色文字总是感叹号吗？它总是在最后吗？

听起来您需要构建一个简单的轻量级代码编辑器并应用您想要的规则。其工作方式是在与“显示”div 相同的空间中创建一个透明的可编辑 div。可编辑 textarea 的内容是不可见的，而“显示”div 的内容是可见的。对于每个击键，您获取可编辑文本区域的内容并将其写入“显示”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);