插入文本时显示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构建您的元素。我在两边使用相同的glyphicon，请使用正确的。

$('.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

这是一个如何做到这一点的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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 class show带有图标，然后显示如下图标：

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

查看下面的工作代码段：

$('.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>

希望这有帮助！