有没有办法设置输入字段值的一部分？

Question

我正在使用 <input> 字段，我想在用户输入不同颜色时设置部分字段的样式。例如，假设 <input> 的样式声明为 color: red; 我想将其 部分 更改为 color: blue; 。有什么办法可以吗？

如果没有（正如我怀疑的那样），关于如何在仍然保留语义标记的同时模拟这种效果的任何创意？

原文由 Josh Leitzel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的怀疑是正确的：样式将仅适用于整个输入。

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

考虑根据用户进行更改的点对输入字段进行划分。输入分为三个部分：

• 在应用更改之前
• 在应用更改的那一点之后
• 在应用更改时

您无法使用单个输入元素实现此目的。随着应用更改的点可能会发生变化，由这三个元素包裹的“输入”部分也会发生变化。解决方案需要 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 事件来确定输入的三个部分，并根据需要应用包装伪造输入的三个部分。

原文由 Jon Cram 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

正如其他人所说，您不能使用样式和静态标记来做到这一点。

您或许可以使用基于 Flash 的表单来完成。

但是，如果我不得不这样做，我会使用 jQuery 在 <input> 上覆盖带有彩色文本的 div。

算法：

1. 使用普通的 <input> 以及所需的任何默认样式。除非用户操作，否则此输入的内容永远不会更改。

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

3. jQuery 然后将新的 <div> 定位在触发词的正上方。

在 <input> 中获取触发词偏移量甚至可能不是必需的，因为前面的词也可能在叠加层中 <div> -- 默认样式或使用 visibility: hidden 。

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

1. 请注意覆盖不会干扰用户尝试使用鼠标或按键访问 <input> 的某些部分。 IE，可能不想覆盖更多的 <input> ，并设置一个 click() 处理程序来传递焦点。

---

替代的、用户友好的和更简单的方法：

与其尝试对输入做时髦的、非用户期望的事情，不如从 Jakob Nielsen 和 StackOverflow 等网站获取一个页面。

只要有一个普通的 ol’ <input> ，但在它下面，显示格式化的文本。

原文由 Brock Adams 发布，翻译遵循 CC BY-SA 2.5 许可协议