Is there a way to style part of an input field's value?

Your suspicions are correct: styles will apply to the whole input only.

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

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

• that before the point at which changes are being applied
• 在应用更改之后
• 在这一点上,应用正在发生变化。

您不能用单个输入元素来实现这一点。而且,当应用更改的点可以更改时,三个元素包装的“输入”部分也将更改。解决方案需要JavaScript。

您首先应该包含一个常规的输入元素,放弃任何所需的着色。使用javascript将输入替换为合适的容器元素。这可以被设计成模仿一个输入元素。

当发生变化时,使用javascript来标识上述三个部分。将它们包裹在合适的元素(跨度将是理想的)中,并根据需要涂上颜色。

Consider the following starting point for the generated replacement markup:

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

使用click、keydown和keyup事件来计算输入的三个部分,并根据需要应用包装伪造输入的三个部分。

As others have said, you can't do this with styles and static markup.

You could probably do it with a Flash-based form.

But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input> .

算法:

1. 使用正常 <输入& GT; 使用所需的默认样式。除了用户操作,此输入的内容将永远不会更改。

2. jquery监视 <输入& GT; . When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. 可能之一 <DIV & GT; 每个词或短语是最好的。

3. jQuery then positions the new <DIV & GT; ,绝对地,直接地在触发字(S)上。
   获得触发字(s)偏移在 <输入& GT; might not even be necessary, because the previous words could also be in the overlay <DIV & GT; --默认样式或 visibility: hidden .
   但是,如果覆盖中只需要触发器字,那么使用固定宽度的字体(如Courier)将有助于子定位。

4. 注意覆盖不会干扰用户尝试鼠标或键到 <输入& GT; . 可能不想再报道 <输入& GT; than necessary, and set a click() handler to relay focus.

Alternate, user friendly and simpler approach:

与其尝试对输入做一些非用户所期望的有趣的事情,不如从JakobNielsen和StackOverflow之类的站点上获取一个页面。

只是一个简单的OL <输入& GT; , but underneath it, show the formatted text as it comes in.

您可以通过(大量工作和)一个具有contentEditable属性的DIV来实现这一点。这就是大多数基于Web的WYSIWYG编辑器如何实现输入的丰富格式。有关详细信息,请参阅此处: http://ajaxian.com/archives/on-browser-wysiwyg

您可以将不同样式的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将随着输入改变而改变宽度。

检查jsFiddle中的工作示例 http://jsfiddle.net/TalhaAwan/ywyw4qq5/

您可以使用一些就地编辑的javascript(如果纯HTML/CSS中不可能这样做的话)来完成这项工作:

http://www.appelsiini.net/projects/jeditable/default.html

jquery插件不使用HTML输入字段,因此可以对输入的不同部分设置样式。它有几个回调钩子,您可以使用这些钩子来设置输入的样式。希望这是个好主意。

您可以让一个标签模拟该输入和要隐藏的实际输入,然后您可以在标签标签标签之间做很多事情(例如,彩色跨度)。