javascript - 如何为同一个输入框的字符设置不同的字体粗细

标签 javascript css input autocomplete

我需要创建一个具有自动完成功能的输入框。因此,当用户输入“ja”时,前两个字符将以粗体显示,而“vascript”将以灰色显示。 由于某些原因,我无法使用 jquery 自动完成功能。由于用户可以输入的单词并不多,我创建了一个数组并为每个缩写分配了匹配的单词。

words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"JAVASCRIPT"}] 

然后,当用户开始输入单词时,我在数组中查找与“缩写”匹配的单词,并将该单词显示在框中。 这工作正常,现在的问题是我试图突出显示用户输入的第一个字符并将其余单词保持为灰色。 我正在尝试做的事情看起来像这样 http://jsfiddle.net/wyVJW/894/ ,除了我希望单词显示在输入框本身内而不是在向下滚动菜单中。 如何只对输入的字符设置字体粗细,而不是对整个输入框设置字体粗细?

最佳答案

输入框不支持多种样式。您需要覆盖一个 DIV 并在该 DIV 中使用 HTML 来“模拟”您想要在视觉上实现的内容,并使用 CSS 使其看起来仍然像是一个输入框。

您需要编写一些 JavaScript 才能使其正常工作。

关于javascript - 如何为同一个输入框的字符设置不同的字体粗细,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18706373/

相关文章:

html - 将所有 div 中的图像与文本左侧对齐

java - 读取用户在文本字段中输入的按空格分割的输入

css - 具有多列的 Bootstrap 列表项。奇怪的行为(包括 JSBIN)

javascript - 如何让对象在垂直轴上并围绕另一个对象旋转 Three.js

javascript - 当 chrome 检查器为 jQuery 变量返回 [object Object] 时如何返回实际数据

加载程序后的 Javascript 图像

javascript - 在 Bootstrap 中防止在移动设备上加载带有 hide-md 或 hide-lg 的图像的最佳方法是什么?

html - 与模式属性一起使用时,Safari HTML 验证不显示输入标题

java - 根据用户输入打印不同的句子

javascript - Jquery - 在同时使用同一输入时区分 'click' 和 'focus'