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事件来确定输入的三个分区，并根据需要应用伪造输入的三个部分。

Answer 2

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

您可以使用基于Flash的表单。

但是，如果我不得不这样做，我会使用jQuery在<input>上面用彩色文本叠加div。

<强>算法：

使用普通<input>，无论需要什么样的默认样式。除非通过用户操作，否则此输入的内容将永远不会更改。
jQuery监视<input>。当它检测到触发词时，它会在输入后添加<div>并用触发词填充它 - 根据需要设置样式。每个单词或短语可能只有一个<div>。
jQuery然后将新<div>绝对直接放在触发词上。
甚至可能不需要在<input>内获得触发词的偏移，因为之前的单词也可能位于重叠<div>中 - 无论是默认样式还是visibility: hidden样式。登记/> 但是，如果覆盖中只需要触发词，那么使用固定宽度字体（如Courier）将有助于子定位。
请注意，叠加层不会干扰用户尝试鼠标或键入<input>的某些部分。 IE，可能不希望覆盖<input>以外的任何内容，并设置click（）处理程序来中继焦点。

替代，用户友好且更简单的方法：

不要尝试对输入做任何时髦的，非用户期望的事情，而是从Jakob Nielsen和StackOverflow等网站获取页面。

只需要一个简单的“<input>”，但在其下方，会显示格式化的文字。

Answer 3

您可以通过（需要付出很多努力）和存在contentEditable属性的div来实现这一目标。这就是大多数基于Web的WYSIWYG编辑器实现丰富的输入格式的方式。有关详细信息，请参阅此处：http://ajaxian.com/archives/on-browser-wysiwyg

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/

中的工作示例

Answer 5

你可以通过一些编辑来实现它javascript（如果在纯html / css中不可能）：

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

该jQuery插件不使用html输入字段，因此可以设置输入的不同部分的样式。它有一些用于回调的钩子，您可以使用它来设置输入样式。希望这有助于作为一个想法。

Answer 6

您可以模拟要隐藏输入内容和真实输入内容的标签，然后可以在标签标签（例如彩色范围）之间做很多事情。

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

6 个答案:

替代，用户友好且更简单的方法：