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

Question

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

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

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 事件找出输入的三个部分，并根据需要应用包装伪造输入的三个部分。