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

【问题标题】：How to make user input unaffected by span elements color style如何使用户输入不受跨度元素颜色样式的影响
【发布时间】：2019-11-11 20:14:19
【问题描述】：

我在内容可编辑<div> 中有一些文字需要与文本的其余部分颜色不同。问题是我不希望用户能够使用不同的颜色样式，他们仍然应该能够删除蓝色字。

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

用户的输入是否可能不受颜色样式的影响？

【问题讨论】：

标签： javascript html css contenteditable

【解决方案1】：

不要让整个 DIV 可编辑，而是将其分成单独的跨度，这样您就可以指定单独的可编辑性。

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

【讨论】：

我仍然希望用户能够删除蓝色字。抱歉不清楚

【解决方案2】：

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

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

【讨论】：

棘手的是你不能使用正则表达式来检测单词的位置。我有一些句子中特定逗号的索引，应该是蓝色的。所以我做了一个系统，用一个 span 元素封装这个词，它的颜色样式是蓝色的。
我不知道你的规则是什么......那部分取决于你。我评论的要点是，您需要创建一个自定义编辑器并应用您能想出的任何疯狂规则。您可能需要做一件更复杂的事情，即抓取当前输入的字符，找出光标所在的位置，并使用您能想到的任何规则有条件地更新 HTML 内容。我不会为你写这个编辑器；）
这也是我得出的结论，只是希望有一个更简单的解决方案。但我非常感谢你的帮助，谢谢。
祝你好运。手工构建编辑器并不是很有趣，尤其是如果您的语言不是“常规”且易于标记化的。您也许可以使用 nearly 之类的内容来帮助您，或者至少可以帮助您进行搜索。