输入框，允许富文本功能

问题描述：

我要找的建议，我应该使用什么成分满足我的需求如下所示是：输入框，允许富文本功能

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

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

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

我不认为有类似的东西，但你可以玩：聚焦和CSS –

– claustrofob

@claustrofob：不看其他的选择，但OP会必须使用JS/jQuery来获取单行约束 – OzrenTkalcecKrznaric

答

您无法设计输入值的子字符串。如果这是必要的，那么您需要制作一个与输入框样式相匹配的自定义元素，这对于在浏览器中进行匹配非常具有挑战性（要稍微说明），并且在处理字符串时，将span元素设置为包装相关的子字符串。为了简化这一点，您可以使用HTML5 contenteditable属性。您仍然必须处理可编辑元素中文本的样式，但浏览器将处理输入交换内容。

更简单的解决方案是使用:valid和:invalid伪选择器。您可以将它们与:focus伪选择器组合在一起，以在编辑过程中提供未验证的样式。关闭我的头顶，像这样：

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

希望它有帮助。

答

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

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

现在添加一个onblur事件给它，如下面的线程所述。呼吁的onblur的方法格式化

Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?

输入框，允许富文本功能

相关推荐