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

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

你还没有真正为我们提供足够的继续下去 - 例如。决定什么是蓝色什么不是的规则是什么？蓝色文字总是感叹号吗？它总是在最后吗？

听起来您需要的是构建一个简单的轻量级代码编辑器并应用您想要的规则。其工作方式是在与 "display" div 相同的 space 中创建一个透明的可编辑 div。可编辑文本区域的内容是不可见的，"display" div 的内容是可见的。对于每个击键，您都将可编辑文本区域的内容写入 "display" div 并应用任何自定义规则。这是一个简单的 fiddle 显示我的意思：

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"></span>');
}

editable.addEventListener('input', (ev) => {
  setDisplayContent(ev.target.innerHTML);
});

setDisplayContent(editable.innerHTML);

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

How to make user input unaffected by span elements color style

html

javascript

css

contenteditable