我有一个简单的搜索表单，仅包含一个文本字段，但它具有过滤器(例如，以“type:”开头的查询仅搜索“type”的数据库列)。我想要的是在实际搜索词(即“类型:”)之前的文本以这样一种方式进行样式设置，即用户可以明显看出它是一个过滤器而不是搜索词。事实上，在用户输入标签后，它可能看起来像 StackOverflow 的标签文本字段(请参阅 this )。到目前为止，我已经在文本字段上调用了 .keypress() 方法来确定第一个术语是否确实是过滤器，但我不确定如何设置过滤器文本的样式。如有任何帮助，我们将不胜感激!
最佳答案
您会发现SO标签框(和其他解决方案)实际上并不对输入框本身的内容进行样式设置，而是将标签/过滤器格式作为跨度前置，并相应地调整输入框的宽度。输入框本身已删除所有样式(因此没有边框或任何内容)，边框由样式化的 div 提供。 所以你需要一个像这样的结构(顺便说一句，这是一个简化的 View ):
<div class="i am a div styled like an input box with a border">
<span class="i am a filter/tag">Type:</span>
<input type="text" class="i am actual input box with all styling removed">
</div>
您还需要处理添加/删除过滤器以及调整输入框的大小(基于过滤器标签的长度)(如果您只有一个过滤器，您可能可以使用固定宽度的输入字段)。 .
关于javascript - 将样式应用于文本框子字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14308958/