有没有办法设置输入字段值的一部分？ [复制]答案

【问题标题】：Is there a way to style part of an input field's value? [duplicate]有没有办法设置输入字段值的一部分？ [复制]
【发布时间】：2011-03-08 11:49:51
【问题描述】：

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

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

【问题讨论】：

您所说的“部分”、背景颜色或文本到底是什么意思？你能举个例子吗？
看起来像这样（obv 不是合法标记）：<input value="<span style="color: red;">This value has <span style="color: blue;">different text</span> colors</span>" />
7 年过去了，有成千上万的库可用于 JS/HTML/CSS，有没有像样的快捷方式来进行交互式文本输入？

标签： html css forms input

【解决方案1】：

您可以有一个标签来模拟该输入并隐藏真正的输入，然后您可以在标签标签之间做很多事情（例如彩色跨度）。

【讨论】：

【解决方案2】：

您可以将不同样式的 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/ 中的工作示例

【讨论】：

【解决方案3】：

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

【讨论】：

能否请您重新验证一次链接。

【解决方案4】：

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

您可以使用基于 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>，但在它下面，显示输入的格式化文本。

【讨论】：

【解决方案5】：

您也许可以通过一些就地编辑 javascript 来做到这一点（如果在纯 html/css 中不可能的话）：

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

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

【讨论】：

这个 URL 404 的现在。 :(

【解决方案6】：

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

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

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

在应用更改之前
在应用更改之后
此时正在应用更改

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

【讨论】：