有没有一种方法可以为输入字段的部分值设置样式？

Question

我正在使用一个 <input> 表单，并希望在用户输入时以不同的颜色样式显示部分内容。例如，假设 <input> 元素有一个样式声明为 color: red;，我想将其中一部分更改为 color: blue;。是否有可能这样做呢？

如果不行（正如我所怀疑的那样），您有什么创意来模拟这种效果，同时仍然保持语义标记？

- Josh Leitzel

---

你所说的“部分”具体指的是什么，背景颜色还是文本？能否举个例子说明一下？ - Pekka

它看起来会像这样（显然不是合法的标记）：<input value="<span style="color: red;">这个值有<span style="color: blue;">不同的文本</span>颜色</span>" /> - Josh Leitzel

7年过去了，JS/HTML/CSS有成千上万的库可用，有没有什么好的捷径可以使文本输入变得更加交互？ - notalentgeek

Answer 1

你的猜测是正确的：样式只会应用于整个输入框。

由于样式只能应用于整个元素，因此解决方案至少需要每种颜色一个元素。

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

1. 在应用更改之前的部分 2. 在应用更改之后的部分 3. 在应用更改时的部分

你无法使用单个输入元素来实现这一点。由于更改应用的位置可能会发生变化，因此由三个元素包装的“输入”部分也会发生变化。需要使用JavaScript来解决问题。

最初应包含常规输入元素，并放弃任何必需的着色。使用JavaScript将输入替换为适当的容器元素。可以将其设置为类似于输入元素的样式。

随着更改的发生，使用JavaScript识别上述三个部分。将它们包装在适当的元素中（span是理想的），并根据需要进行着色。

以下是生成的替换标记的起始点，请参考。

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

使用click、keydown和keyup事件来确定输入的三个部分，并根据需要将模拟输入的三个部分进行包裹。

- Jon Cram

Answer 2

正如其他人所说，您无法使用样式和静态标记实现此目的。

您可以使用基于Flash的表单来实现这一点。

但是，如果我必须这样做，我会使用jQuery在 <input> 上叠加带有着色文本的div。

算法:

1. 使用普通的 <input> 和所需的任何默认样式。此输入的内容除了用户操作外永远不会更改。

2. jQuery 监视该 <input>。当它检测到触发词时，它会在输入后添加一个 <div> 并用所需的样式填充它。最好每个单词或短语使用一个 <div>。

3. 然后，jQuery 将新的 <div> 绝对地定位在触发词之上。可能甚至不需要获取 <input> 中触发词的偏移量，因为前面的单词也可能在覆盖层 <div> 中，要么是默认样式，要么使用 visibility: hidden。但是，如果只需要在覆盖层中显示触发词，则使用等宽字体，例如 Courier，将有助于进行子位置设置。

4. 注意覆盖层不会干扰用户尝试鼠标或键盘定位到 <input> 的某些部分。最好不要覆盖太多的 <input>，并设置 click() 处理程序以传递焦点。

另一种用户友好且更简单的方法:

与其尝试对输入进行奇怪的、非用户预期的操作，不如从 Jakob Nielsen 和像 StackOverflow 这样的网站学习。

只需要一个普通的 <input>，但在其下方显示即时格式化后的文本。

- Brock Adams

Answer 3

你可以通过添加 contentEditable 属性的 div 元素来实现这一点（需要花费很多精力）。这是大多数基于 Web 的所见即所得编辑器实现输入格式化的方式。点击此处获取更多信息：http://ajaxian.com/archives/on-browser-wysiwyg。

- Mike Sherov

---

请您再次验证链接。 - Rahul R.

Answer 4

您可以在一个容器中使用透明输入框来将不同样式的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将根据输入更改其宽度。

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

- Talha Awan

Answer 5

你可能可以通过一些现场编辑的 JavaScript 来实现它（如果在纯 HTML/CSS 中不可能）。

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

那个 jQuery 插件并不使用 HTML 输入字段，因此可以可能对输入的不同部分进行样式设置。它有一些回调钩子，您可以使用这些钩子来设置输入的样式。希望这能作为一个想法帮助到您。

- Mark Pope

---

这个URL现在是404错误。 :( - Citricguy

Answer 6

你可以使用一个标签来模拟输入框，将真正的输入框隐藏起来，然后在标签之间进行很多操作（例如，着色的span）。

- Botea Florin