Question

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

例如： -

我试过这个

JsFiddle

但它始终在右侧或始终在左侧。

foo

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

NOT DUPLICATE： -

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

Answer 1

如果没有一点点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;
}

Answer 2

我使用了一些黑魔法：jsfiddle

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

＆＃13;

$('.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!');
});

＆＃13;

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

＆＃13;

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

＆＃13;

像文本框中的文本之后的占位符

2 个答案: