Html 有没有一种方法可以设置输入字段部分的样式'；s值多少？

我正在处理一个

字段，我希望将该字段的一部分设置为用户以不同颜色键入的样式。例如，假设

的样式声明为

颜色：红色我想把它的一部分改成
颜色：蓝色。这有可能吗

如果没有（正如我所怀疑的那样），我可以如何在保持语义标记的同时模拟这种效果呢？你的猜测是正确的：样式将只应用于整个输入

由于样式只能应用于一个元素的整体，因此解决方案要求每个所需颜色至少有一个元素

考虑输入字段相对于用户正在进行更改的点的划分。输入有三个部分：


在应用更改的点之前
在应用更改的点之后
在应用更改时

使用单个输入元素无法实现这一点。当应用更改的点发生变化时，由三个元素包装的“输入”部分也会发生变化。解决方案需要JavaScript

您应该首先包括一个常规的输入元素，并放弃任何所需的着色。使用JavaScript将输入替换为合适的容器元素。可以将其设置为模仿输入元素

当发生变化时，使用JavaScript识别上述三个部分。将其包裹在合适的构件中（跨度最好），并根据需要涂上颜色

考虑生成的替换标记的以下起点：

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>


福
起泡
酒吧

使用click、keydown和keyup事件找出输入的三个部分，并根据需要应用包装伪造输入的三个部分。
您可以使用一些就地编辑javascript（如果在纯html/css中不可能）：


jQuery插件不使用html输入字段，因此可以为输入的不同部分设置样式。它有几个用于回调的钩子，您可以使用它们来设置输入的样式。希望这对您有所帮助。
您可以通过（大量的努力和）一个带有contentEditable属性的div来实现这一点。这就是大多数基于web的所见即所得编辑器实现输入丰富格式的方式。请参见此处了解更多信息：
正如其他人所说，样式和静态标记无法做到这一点

你可以用一个基于Flash的表单

但是，如果必须这样做的话，我会使用jQuery在
的顶部覆盖div和彩色文本

算法：

将普通的
与所需的任何默认样式一起使用。除用户操作外，此输入的内容永远不会更改

jQuery监视
。当它检测到触发字时，它会在输入后添加一个
，并用触发字填充它——根据需要设置样式。可能每个单词或短语一个
是最好的

jQuery然后将新的
绝对地直接定位在触发字上。

获取
中的触发字偏移量甚至可能没有必要，因为前面的字也可能在覆盖
中——默认样式或具有
可见性：隐藏

但是，如果叠加中只需要触发字，那么使用固定宽度字体（如Courier）将有助于子定位

请注意，覆盖不会干扰用户尝试将鼠标或按键移动到
的某些部分。IE，可能不想覆盖任何超出必要的
，并将click（）处理程序设置为中继焦点


替代、用户友好且更简单的方法：
与其尝试对输入做一些非用户期望的有趣的事情，不如从Jakob Nielsen和StackOverflow等网站获取一个页面

只需要一个普通的ol'
，但在它下面，显示输入的格式化文本
 您可以在透明输入重叠的容器中并排保留不同样式的div。根据输入条目修改样式化div的宽度

例如，要为前导空格和尾随空格的输入背景着色，请执行以下操作：

<div class="bckg-container">
  <div id="bckg-leading" class="bckg spaces">
  </div>
  <div id="bckg-middle" class="bckg">
  </div>
  <div id="bckg-trailing" class="bckg spaces">
  </div>
  <br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />





容器中的三个div将随输入更改而更改其宽度

检查JSFIDLE中的工作示例
你可以有一个标签模拟该输入和要隐藏的真实输入，然后你可以在标签标签之间做很多事情（例如，彩色跨距）。
你所说的“部分”、背景色或文本到底是什么意思？你能举个例子吗？它看起来像这样（obv不是合法的标记）：
7年过去了，有数千个lib可用于JS/HTML/CSS，有什么合适的快捷方式可以进行交互式文本输入吗？这个URL 404现在是：（请您重新验证一下链接。