插入文本时显示 glyphicon-remove Bootstrap

Question

我的 index.html：

<input type="text" class="search-input" placeholder="Search..." >
<span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span>

我想在插入文本时显示图标。 示例：

显示图标

Answer 1

这是针对您的问题的 JQuery 解决方案。请使用 CSS 和 JQuery 来构建您的元素。我在两边使用相同的字形，请使用正确的。

$('.custom-input > input').on('keyup', function() {
  if ($(this).val()) {
    $(this).siblings('span').show();
  }else{
    $(this).siblings('span').hide();
  };
})

.custom-input {
  position: relative;
}

.custom-input > input {
  padding: 0px 17px;
}

.custom-input > span:nth-of-type(1) {
  position: absolute;
  left: 3px;
  height: 14px;
  top: calc(50% - 7px);
  display: none;
}

.custom-input > span:nth-of-type(2) {
  position: absolute;
  right: 3px;
  height: 14px;
  top: calc(50% - 7px);
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="btn-group custom-input">
  <span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span>
  <input type="text" class="search-input" placeholder="Search...">
  <span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span>
</div>

Answer 2

这里有一个例子说明你如何做到这一点：

function showClear(id){

var input =document.getElementById(id).value;
if (input !=""){

document.getElementById("search-bar-icon-clear").style.display="block";
}

if(input ==""){
document.getElementById("search-bar-icon-clear").style.display="none";
}
}

.right-inner-addon {
  position: relative;
 
}

.right-inner-addon input {
  padding-right: 30px;
}

.right-inner-addon span {
  position: absolute;
 left:25%;
  padding: 1%;
  pointer-events: none;
  cursor:pointer;
  display:none;
 
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="right-inner-addon ">
<input type="text" class="search-input" id="searchInput" placeholder="Search...."  onkeyup="showClear(this.id)" >
<span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span>
</div>

Answer 3

您可以在这里使用简单的 javascript (jQuery)，例如：

// 'keyup' is triggered whenever any key is pressed on input
$('.search-input').on('keyup', function() {
  if($(this).val() != '') {
    $('#search-bar-icon-clear').addClass('show');
  } else {
    $('#search-bar-icon-clear').removeClass('show');
  }
});

所以基本上在上面的代码中，您正在检查.search-input 是否有一些文本，然后添加类show 否则删除该类。并且 if 类 show 带有图标，然后显示如下图标：

#search-bar-icon-clear.show {
  display: block;
}

看看下面的工作 sn-p：

$('.search-input').on('keyup', function() {
  if($(this).val() != '') {
    $('#search-bar-icon-clear').addClass('show');
  } else {
    $('#search-bar-icon-clear').removeClass('show');
  }
});

body {
  padding: 20px;
}

.search-holder {
  position: relative;
}

.search-input {
  padding: 10px 40px 10px 10px;
}

#search-bar-icon-clear {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}

#search-bar-icon-clear.show {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-holder">
  <input type="text" class="search-input form-control" placeholder="Search..." >
  <span class="fa fa-remove" id="search-bar-icon-clear"></span>
</div>

希望这会有所帮助！