有没有一种方法来设置input字段值的一部分?

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

如果没有(如我所怀疑的),有什么创造性的想法,我怎样才能模仿这种效果,同时仍然保留语义标记?

您的怀疑是正确的:样式将仅适用于整个input。

由于样式只能应用于整个元素,因此每个所需的颜色至less需要一个元素。

考虑input字段相对于用户正在进行更改的点的划分。 有三个部分的input:

  • 在应用更改之前
  • 那在变化被应用的点之后
  • 在这一点上,这些变化正在被应用

你不能用一个单一的input元素来实现这一点。 而且,随着变化的实施点可能发生变化,由三个要素包裹的“input”部分也将发生变化。 JavaScript是解决scheme所必需的。

您最初应该包含一个常规input元素,并放弃任何所需的着色。 使用JavaScript将inputreplace为合适的容器元素。 这可以被devise为模仿input元素。

随着变化的发生,使用JavaScript来识别上述三个部门。 用适当的元素(跨度将是理想的)和颜色按需要包裹它们。

考虑以下生成replace标记的起点:

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

使用click,keydown和keyup事件来计算input的三个分割,并根据需要应用伪装input的三个部分。

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

你可以用一个基于Flash的表单来完成。

但是,如果我不得不这样做,我会使用jQuery覆盖div的颜色文本,顶部<input>

algorithm:

  1. 使用一个普通的<input>和任何默认的样式是需要的。 除用户操作外,此input的内容不会改变。

  2. jQuery监视<input> 。 当它检测到触发字时,它会在input之后添加一个<div> ,并用触发字填充 – 按照需要进行设置。 可能每个单词或短语最好是一个<div>

  3. jQuery然后将新的<div> ,绝对地,直接放置在触发字上。
    <input>获取触发器字的偏移量可能甚至是不必要的,因为之前的字也可能在叠加<div> – 默认情况下或者visibility: hidden
    但是,如果叠加层中只需要触发字,那么使用像Courier这样的固定宽度的字体将有助于子定位。

  4. 请注意,叠加层不会干扰用户尝试鼠标或键入<input>某些部分。 IE浏览器,可能不想覆盖任何更多的<input>比必要的,并设置一个点击()处理程序来中继焦点。


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

而不是尝试做input的时髦,非用户期望的东西,从Jakob尼尔森和像StackOverflow网站采取一页。

只需要一个普通的ol <input> ,但是在它下面显示格式化的文本。

你可能可以通过一些编辑javascript来实现它(如果在纯html / css中不可行的话):

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

该jQuery插件不使用HTMLinput字段,因此可以设置input的不同部分。 它有几个钩子可以用来设置input风格。 希望有助于作为一个想法。

你可以通过(很多努力)和一个带有contentEditable属性的div来达到这个目的。 这是大多数基于网页的所见即所得的编辑器如何实现丰富的input格式。 有关详细信息,请参阅此处: http : //ajaxian.com/archives/on-browser-wysiwyg

您可以将不同风格的div并排放置在透明input重叠的容器中。 根据input条目修改样式div的宽度。

例如,为前导空格和尾随空格input背景颜色:

 <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将随着input的改变而改变它们的宽度。

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