值/占位符 - 不同的文字样式

Posted 2023-03-05

【中文标题】值/占位符 - 不同的文字样式

【英文标题】：Value/Placeholder - different styling for words

【发布时间】：2012-05-14 17:53:32

【问题描述】：

占位符有问题。 我想问一下，是否有可能在输入字段中设置值的样式，但是以不同的方式设置该值的单词。

例如，如果我们有初始值 "First Name" 的输入字段，我希望 green color 对应 "First"，red color 对应 "Name"（这只是一个示例）。

这可能吗？

注意：我使用值作为“占位符”（而不是占位符 html 属性），因为 ie。

<input type="text" value="First Name" onFocus="if (this.value == 'First Name') this.value = '';" onBlur="if (this.value == '') this.value = 'First Name';" />

【问题讨论】：

我已经看到了你想要的效果的大型解决方法。基本上，输入框将位于顶层，文本使用透明字体（全为空白），之后其后面的文本区域将填充自定义语法，该语法通过 javascript 在值更改时更新。这是一个很好的解决方法，它在 ios 中不起作用（如果我没记错的话）......或者你可以得到一个富文本编辑器，但这对于像用户名输入这样的东西来说可能有点过头了。

我有几个用于此表单的输入字段，所以我可能会再次使用一种样式（如我所见，这是此类问题的最佳解决方案）:)...谢谢

名字和姓氏字段总是可以有不同的样式=P 欢迎来到***，随时询问和学习。

【参考方案1】：

不幸的是，这是不可能的。当涉及到表单元素的样式时，有很多障碍，可以为元素设置颜色而不是字符，试试这个：

http://jsfiddle.net/Fgd2e/1/

【讨论】：

@cool 不客气 :)，最好使用类，addClass removeClass 方法，而不是像我一样使用 js 来获得 css 样式。

我可能会再次使用一种样式（因为我没有太多的输入字段需要为不同的单词实现不同的样式。但是您的解决方案非常好，消除了我对如何实现这个...tnx

【参考方案2】：

您可以使用color 样式属性更改输入的颜色。为每个单词设置不同的颜色要困难得多。您需要有一个显示正确颜色的叠加层。此外，光标会消失，让用户不知道自己现在在哪里。

【讨论】：

我明白了......是的，我知道这很难，特别是因为这需要在所有（大多数）浏览器中工作......tnx :)