2

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

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

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

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

4

2 回答 2

1

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

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

现在添加一个 onblur 事件，如以下线程所述。调用 onblur 上的方法进行格式化

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

于 2013-06-30T16:16:42.370 回答
0

您不能为输入值的子字符串设置样式。如果这是必要的，您需要制作一个与输入框样式匹配的自定义元素，这将非常具有挑战性（委婉地说）以在浏览器之间进行匹配，并且在处理字符串时，设置一个要换行的span元素相关的子字符串。为了简化这一点，您可以使用 HTML5contenteditable属性。您仍然需要处理可编辑元素中文本的样式，但浏览器将处理输入交换内容。

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

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

希望能帮助到你。

于 2013-06-30T15:42:55.257 回答