Html 在文本框中的文本后放置类似于保持架的位置

我们想在文本后的文本框中显示一些通知。 比如，如果filter被激活，那么我们希望在文本之后显示filter activated。 文本由用户输入，因此如果用户更改文本框的文本，则文本框会根据文本的长度自动调整

例如：-

我试过这个

但它总是在右边或左边

#清除{
右：39px；
背景#f1f1；
颜色：rgb（187187187187）；
字体大小：粗体；
光标：指针；
宽度：104px；
高度：36px；
显示：块；
位置：绝对位置；
/*右：2px*/
顶部：2个；
}
.查册表格{
宽度：100%；
右边填充：52px；
字号：19px；
字体系列：“Merriweather”，无衬线；
字体：斜体；
高度：30px；
}

过滤活动的

如果没有一点javascript，在HTML/CSS中是不可能的

我用一种可能性和jQuery制作了一个快速工作的示例：

这样做的目的是将输入的文本复制到一个不可见的范围内，从而将标签推向右侧：

HTML:

CSS:

---

我会使用一些黑魔法：

我从头开始写的，所以添加一些样式

$（'.inputText'）。打开（'keyup'，函数（）{
var值=$（this.text（）；
$（'#hidden'）.val（value.change（）；
});
$（'#hidden'）。在（'change'，function（）{
var text=$（this.val（）；
$（'.test'）.html（文本）；
});
$（'.clear'）。在（'click'，函数（）{
警惕（“你好！”）；
});
.input{
位置：相对位置；
显示：内联块；
边框：1px纯色灰色；
边界半径：3px；
线高：30px；
填充：0 10px 0 10px；
}
.inputText{
显示：内联块；
最小宽度：150px；
大纲：无；
}
.清楚{
显示：内联块；
宽度：120px；
高度：30px；
左侧填充：10px；
右：0；
排名：0；
背景色：#F4；
边界半径：3px；
}

过滤aktiv
我不认为有那么一点点代码就可以。。。检查选择的插件，它看起来像那个小代码？那么我们如何才能做到这一点呢？使用纯css是不可能的。您可以在输入文本中设置过滤器或其他任何内容，但如果只有一个值，则无法在文本旁边调整过滤器。在值之后设置过滤器没有任何意义。虽然过滤器可以重复使用，但它确实无法正常工作，就像我们只需键入并单击文本一样。。你可以在点击时编辑文本，因为空间重叠了，虽然+1表示轻松。这是在firefox上工作的，但是经过一些调整，它也可以在其他浏览器上工作（）检查这个，我刚刚编辑了一点css现在它工作得很好。。。你的例子很好，这是我想要的。需要一些修改。让我检查一下，然后我会接受这个答案。顺便说一句，我投票赞成理解我的要求。它工作正常，但问题是现在我无法点击文本框，因为不可见的跨度。对不起，这不是我想要的。这里的“过滤aktiv”是恒定的，它不会移动。我想在文本后面添加'Filtring aktiv'。文本短或长。@RenuThakur'filtering aktiv'不是常量，它正在移动，请尝试键入更多文本。您还可以更改.inputText最小宽度属性，并使输入的初始宽度尽可能小。是的，对。你能检查一下这个吗
<div id="group">
  <input type="text" id="auto" class="search-form" >
  <div id="clear"><span class="spacer"></span><span class="text">Filtrering aktiv</span></div>
</div>

$('#auto').on('keyup', function(){
  $('#clear .spacer').text($(this).val());
});

#clear {
  cursor: pointer;
  position: absolute;
  white-space: nowrap;
  top: 16px;
  left: 20px;
  height: 0;
}
#clear .spacer {
  visibility: hidden;
  font-size: 19px;
}
#clear .text {
  display: inline-block;
  background: #f1f1f1;
  font-weight: bold;
  padding: 3px;
}
.search-form {
  width: 100%;
  font-size: 19px;
  height:30px;
}