允许丰富文本功能的输入框

Input box that allows rich text features

本文关键字：输入 功能 许丰富 文本      更新时间：2023-09-26

我正在寻求建议，我应该使用什么组件来满足我的需求，如下所示：

我想要一个简单的单行编辑框，允许用户输入文本，当这个编辑组件有焦点时，所有文本都应该以相同的方式格式化（一种字体，一种颜色，…）

但是，当输入组件失去焦点时，我想"处理"它的文本，并且（如果适用），该文本的某些部分以不同的格式显示（比如说灰色而不是标准黑色）。

是否有一些现有组件可以达到这样的目标，或者是否有一些简单的代码/解决方案可以实现这样的行为？

由于无法格式化输入元素中的文本，因此需要使用div元素来实现。采用如下的可编辑div

<div contenteditable="true"></div>

现在添加一个onblur事件到它，如下线程所述。在onblur上调用一个方法来格式化

是否可以使用JS或jQuery为DIV编写onFocus/lostFocus处理程序？

不能为输入值的子字符串设置样式。如果这是必须的，那么您需要创建一个与输入框样式匹配的自定义元素，这在浏览器之间匹配（委婉地说）将是非常困难的，并且在处理字符串时，设置一个span元素来包装相关的子字符串。为了简化这个过程，您可以使用HTML5contenteditable属性。您仍然需要处理可编辑元素中文本的样式，但浏览器将处理输入交换的内容。

更简单的解决方案是使用:valid和:invalid伪选择器。您可以将它们与:focus伪选择器相结合，以便在编辑过程中提供未经验证的样式。在我的脑海里，有这样的东西：

input.targetClass:invalid {
    background-color: #FDD;
    color: #B66;
}
input.targetClass:invalid:focus {
    background-color:auto;
    color: #000;
}

希望能有所帮助。

相关文章：