将样式应用于文本框子字符串

Question

我有一个简单的搜索表单，只包含一个文本字段，但它有过滤器（例如，以“type：”开始查询只搜索“type”的数据库列）。我想要的是在实际搜索词之前的那个文本（即“type：”）的样式，以便用户明白它是一个过滤器，而不是一个搜索词。事实上，在用户输入标签后，它可能看起来像StackOverflow的标签文本字段（请参阅this）。到目前为止，我已经在文本字段上调用了.keypress（）方法来确定第一个术语是否确实是一个过滤器，但我不确定如何设置过滤器文本的样式。任何帮助表示赞赏！

Answer 1

您会发现SO标签框（和其他解决方案）实际上没有在输入框本身设置内容样式，而是将标记/过滤器格式设置为跨度，并相应地调整输入框的宽度。输入框本身已删除所有样式（因此没有边框或任何东西），边框由样式div提供。 所以你需要一个像这样的结构（顺便说一下这是一个简化的视图）：

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

您还需要处理添加/删除过滤器和调整输入框的大小（基于过滤器标签的长度）（如果您只有一个过滤器，您可能可以使用固定宽度的输入字段）。