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

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

您可以通过（大量的努力和）一个带有 contentEditable 属性的 div 来实现这一点。这就是大多数基于 Web 的 WYSIWYG 编辑器实现丰富的输入格式的方式。请参阅此处了解更多信息：http : //ajaxian.com/archives/on-browser-wysiwyg

Answer 3

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

您可以使用基于Flash的表单来完成它.

但是,如果我不得不这样做,我会使用jQuery来覆盖div,并使用彩色文本覆盖<input>.

算法:

使用法线<input>时所需的默认样式.除用户操作外,此输入的内容永远不会更改.
jQuery监视它<input>.当它检测到触发词时,它会<div>在输入后添加一个并用触发词填充它 - 根据需要设置样式.大概一个<div>每个词或短语是最好的.
然后jQuery将新的<div>,绝对地直接放在触发词上.甚至可能不需要
获取触发单词的偏移量<input>,因为前面的单词也可以在叠加中<div>- 无论是默认设置还是默认设置visibility: hidden.
但是,如果覆盖中只需要触发字,那么使用固定宽度字体(如Courier)将有助于子定位.
请注意叠加不会干扰用户尝试鼠标或键入某些部分<input>.IE,可能不想覆盖任何<input>超过必要的内容,并设置click()处理程序来中继焦点.

备用,用户友好和简单的方法:

而不是尝试对输入做出时髦的,非用户期望的事情,从Jakob Nielsen和StackOverflow等网站获取页面.

只需要一个简单的ol' <input>,但在它下面,显示格式化的文本.