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

Question

我有一个简单的搜索表单，只包含一个文本字段，但它有过滤器（例如，以“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>

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