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

how to set different font-weights for characters in the same input box

本文关键字：设置字符字体输入更新时间：2023-09-26

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

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

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

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

你需要编写一些JavaScript来完成这项工作。