有没有一种方法来设置input字段值的一部分？
我正在处理一个<input>字段，我想将字段的一部分设置为用户input不同的颜色。 例如，假设<input>具有color: red;的样式声明color: red; 我想把它的一部分改成color: blue; 。 有没有办法做到这一点？
如果没有（如我所怀疑的），有什么创造性的想法，我怎样才能模仿这种效果，同时仍然保留语义标记？
您的怀疑是正确的：样式将仅适用于整个input。
由于样式只能应用于整个元素，因此每个所需的颜色至less需要一个元素。
考虑input字段相对于用户正在进行更改的点的划分。 有三个部分的input：
- 在应用更改之前
- 那在变化被应用的点之后
- 在这一点上，这些变化正在被应用
你不能用一个单一的input元素来实现这一点。 而且，随着变化的实施点可能发生变化，由三个要素包裹的“input”部分也将发生变化。 JavaScript是解决scheme所必需的。
您最初应该包含一个常规input元素，并放弃任何所需的着色。 使用JavaScript将inputreplace为合适的容器元素。 这可以被devise为模仿input元素。
随着变化的发生，使用JavaScript来识别上述三个部门。 用适当的元素（跨度将是理想的）和颜色按需要包裹它们。
考虑以下生成replace标记的起点：
<div class="input"> <span class="nonEdited before">foo</span> <span class="edited">fizz</span> <span class="nonEdited after">bar</span> </div>
使用click，keydown和keyup事件来计算input的三个分割，并根据需要应用伪装input的三个部分。
正如其他人所说，你不能用样式和静态标记来做到这一点。
你可以用一个基于Flash的表单来完成。
但是，如果我不得不这样做，我会使用jQuery覆盖div的颜色文本，顶部<input> 。
algorithm：
-
使用一个普通的
<input>和任何默认的样式是需要的。 除用户操作外，此input的内容不会改变。 -
jQuery监视
<input>。 当它检测到触发字时，它会在input之后添加一个<div>，并用触发字填充 – 按照需要进行设置。 可能每个单词或短语最好是一个<div>。 -
jQuery然后将新的
<div>，绝对地，直接放置在触发字上。
在<input>获取触发器字的偏移量可能甚至是不必要的，因为之前的字也可能在叠加<div>– 默认情况下或者visibility: hidden。
但是，如果叠加层中只需要触发字，那么使用像Courier这样的固定宽度的字体将有助于子定位。 -
请注意，叠加层不会干扰用户尝试鼠标或键入
<input>某些部分。 IE浏览器，可能不想覆盖任何更多的<input>比必要的，并设置一个点击（）处理程序来中继焦点。
备用，用户友好和更简单的方法：
而不是尝试做input的时髦，非用户期望的东西，从Jakob尼尔森和像StackOverflow网站采取一页。
只需要一个普通的ol <input> ，但是在它下面显示格式化的文本。
你可能可以通过一些编辑javascript来实现它（如果在纯html / css中不可行的话）：
http://www.appelsiini.net/projects/jeditable/default.html
该jQuery插件不使用HTMLinput字段，因此可以设置input的不同部分。 它有几个钩子可以用来设置input风格。 希望有助于作为一个想法。
你可以通过（很多努力）和一个带有contentEditable属性的div来达到这个目的。 这是大多数基于网页的所见即所得的编辑器如何实现丰富的input格式。 有关详细信息，请参阅此处： http : //ajaxian.com/archives/on-browser-wysiwyg
您可以将不同风格的div并排放置在透明input重叠的容器中。 根据input条目修改样式div的宽度。
例如，为前导空格和尾随空格input背景颜色：
<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将随着input的改变而改变它们的宽度。
检查jsfiddle中的工作示例http://jsfiddle.net/TalhaAwan/ywyw4qq5/
