文本框中文本后的占位符[关闭]

Question

我们想在文本框之后显示一些通知。 就像，如果过滤器被激活，那么我们想在文本之后显示“过滤器激活”。 文本是用户输入的，所以如果他们改变了文本框的文本，那么它会根据文本的长度自动调整。

例如：-

Sample image creation

我试过了

JsFiddle

但它总是在右边或总是在左边。

#clear {
right: 39px;
background: #f1f1f1;
color: rgb(187, 187, 187);
font-weight: bold;
cursor: pointer;
width: 104px;
height: 36px;
display: block;
position: absolute;
/* right: 2px; */
top: 2px;
 }
.search-form {
width: 100%;
padding-right: 52px;
font-size: 19px;
font-family: 'Merriweather', sans-serif;
font-style: italic;
height:30px;
 }

<input type="text" id="auto" class="search-form" >
<div id="clear">Filtering active</div>

不重复：-

 Place holder is different from this. Place holder is talking about the text box, What text box can contain. But this is talking about the filtering. 

Answer 1

我会使用一些黑魔法：jsfiddle

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

$('.inputText').on('keyup', function () {
  var value = $(this).text();  
  $('#hidden').val(value).change();
});

$('#hidden').on('change', function () {
  var text = $(this).val();
  $('.test').html(text);
});
$('.clear').on('click', function () {
  alert('Hello!');
});

.input {
    position: relative;  
    display: inline-block;
    border: 1px solid gray;
    border-radius: 3px;
    line-height: 30px;
    padding: 0 10px 0 10px;
}
.inputText {
    display: inline-block;
    min-width: 150px;
    outline: none;
}
.clear {
    display: inline-block;
    width: 120px;
    height: 30px;
    padding-left: 10px;
    right:0;
    top:0;
    background-color:#f4f4f4;
    border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
    <input type="hidden" id="hidden" >     
    <span class='input'>
        <span contenteditable='true' class='inputText'> </span>
        <span class='clear'>Filtrering aktiv</span>
    </span>    
</div>
<div>
    <small class='test'></small>
</div>

Answer 2

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

我用一种可能性和 jQuery 制作了一个快速工作示例： http://jsfiddle.net/4t05kh2p/1/

这个想法是将输入的文本复制到一个不可见的跨度中，这会将您的标签推到右侧：

HTML：

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

JS：

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

CSS：

#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;
}