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

Apply style to textbox substring

本文关键字：字符串文本样式应用于更新时间：2023-09-26

我有一个简单的搜索表单，它只包含一个文本字段，但是它有过滤器(例如，以"type:"开头的查询只搜索数据库的"type"列)。我想要的是，在实际搜索词(即"type:")之前的文本要以这样一种方式进行样式设计，即对用户来说，它是一个过滤器，而不是一个搜索词。事实上，在用户输入一个标签之后，它可能看起来像StackOverflow的Tags文本字段(参见此)。到目前为止，我已经在textfield上调用了一个.keypress()方法，以确定第一个项是否确实是一个过滤器，但是我不确定如何设置过滤器文本的样式。任何帮助都是感激的!

您会发现SO标记框(和其他解决方案)实际上不为输入框本身的内容设置样式，而是将标记/过滤器格式添加为span，并相应地调整输入框的宽度。输入框本身删除了所有的样式(因此没有边框或任何东西)，边框由样式化的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>

你需要处理添加/删除过滤器和调整输入框的大小(基于过滤器标签的长度)，以及(如果你只有一个过滤器，你可能会摆脱固定宽度的输入字段)…