在输入中对单词的字母进行不同的样式设置，可能吗？

Question

想知道这是否可行，但是如果我有一个包含文本的输入，例如我们可以在输入中输入“Test”这个词。我希望能够做的是改变“测试”一词的单个字母的样式

我希望' Te '变为粗体，然后让'st'成为常规。

它不一定要大胆，也许我希望'e'是红色的或类似的东西。

关于如何实现这一目标的任何想法？

Answer 1

不要认为这是可能的（会做更多的测试）。

如何添加一个看似输入的contenteditable div？

简单的可满足的例子：http://jsfiddle.net/PpEx7/

修改

Nopez不可能。 ：）

Answer 2

您应该看一下HTML WYSIWYG编辑器的构建方式。

基本上，他们

• 隐藏输入字段并显示带有样式内容的另一个html元素： Highlight text as you type on textarea

或

• 在html中使用设计模式： javascript Rich Text Editors

两种方式都不是微不足道的......

Answer 3

如果您查看MDN CSS Reference，您可以自己看到，字段内没有单个字母的选择器。

您可以做的最好的事情是使用:first-letter

但As you can see它不适用于<input />

Answer 4

不能使用<input type="text">标记。然而，你可以欺骗用户相信他正在使用一个风格化的输入，用一个有争议的div替换它。

然而，我在几年前研究过，如果您想要一个可靠的跨浏览器解决方案，那就太乱了。 除非我记得错误，否则html只是在一个可疑的div中显示一个粗体文本，很容易在主要浏览器中产生以下内容：

<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->

没有kiddin。