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

Is there a way to style part of an input field's value?

提问by Josh Leitzel

I'm working with an <input>field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input>has a style declaration of color: red;and I want to change partof it to color: blue;. Is there any way this is possible?

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

If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?

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

采纳答案by Jon Cram

Your suspicions are correct: styles will apply to the whole input only.

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

As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.

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

Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:

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

• that before the point at which changes are being applied
• that after the point at which changes are being applied
• that at the point the changes are being applied

• 在应用更改之前
• 在应用更改的点之后
• 此时正在应用更改

You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.

您无法使用单个输入元素实现此目的。随着应用更改的点可能发生变化，由三个元素包裹的“输入”部分也将发生变化。解决方案需要 JavaScript。

You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.

您最初应该包含一个常规输入元素并放弃任何所需的着色。使用 JavaScript 将输入替换为合适的容器元素。这可以设计为模仿输入元素。

As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.

当发生变化时，使用 JavaScript 来识别上述三个部门。根据需要将它们包裹在合适的元素中（跨度是理想的）和颜色。

Consider the following starting point for the generated replacement markup:

考虑生成的替换标记的以下起点：

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.

使用 click、keydown 和 keyup 事件找出输入的三个部分，并根据需要应用包装伪造输入的三个部分。

回答by Brock Adams

As others have said, you can't do this with styles and static markup.

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

You could probably do it with a Flash-based form.

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

But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.

但是，如果必须这样做，我会使用 jQuery 将带有彩色文本的 div 覆盖在<input>.

Algorithm:

算法：

1. Use a normal <input>with whatever default styles are desired. The contents of this input will never change except by user action.

2. jQuery monitors that <input>. When it detects trigger word(s), it adds a <div>after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div>per word or phrase is best.

3. jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
   Getting the trigger word(s) offset within the <input>might not even be necessary, because the previous words could also be in the overlay <div>-- either styled defaultly or with visibility: hidden.
   But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.

4. Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input>than necessary, and set a click() handler to relay focus.

1. 使用具有<input>所需默认样式的法线。除非用户操作，否则此输入的内容永远不会改变。

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

3. 然后 jQuery 将 new<div>绝对地直接定位在触发词上。甚至可能不需要
   在 中获取触发词偏移量<input>，因为之前的词也可以在叠加层中<div>——默认样式或使用visibility: hidden.
   但是，如果叠加层中只需要触发词，则使用固定宽度字体（如 Courier）将有助于子定位。

4. 注意覆盖层不会干扰用户尝试使用鼠标或键击<input>. IE，可能不想涵盖更多<input>不必要的内容，并设置 click() 处理程序来中继焦点。

---

---

Alternate, user friendly and simpler approach:

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

Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.

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

Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.

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

回答by Talha Awan

You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.

您可以将不同样式的 div 并排保存在由透明输入重叠的容器中。根据您的输入条目修改样式 div 的宽度。

For example, to color input background for leading and trailing spaces:

例如，为前导和尾随空格着色输入背景：

<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" />

The three divs inside the container will change their width with input change.

容器内的三个 div 将随着输入的变化而改变它们的宽度。

Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/

检查 jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/ 中的工作示例

回答by Mike Sherov

You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg

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

回答by Mark Pope

You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):

您也许可以通过一些就地 javascript 编辑来完成（如果在纯 html/css 中不可能）：

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

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

That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.

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

回答by Botea Florin

You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).

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