在输入失去焦点时防止隐藏清除按钮="搜索"

时间:2018-05-07 18:37:49

标签: html5 search input focus

我使用HTML5



<input type="search" />
&#13;
&#13;
&#13;

一旦开始输入,就会出现清除按钮(&#39; x&#39;)。到目前为止,这就是我想要的。但是当焦点不再出现在输入字段上时(虽然里面仍有字符),清除按钮会被隐藏。

如何防止这种行为?

我想向用户保存必须重点关注搜索输入以清除它的额外步骤。所以&#39; x&#39;只要焦点在哪里,只要搜索输入中有超过0个字符,就应该是可见的。

1 个答案:

答案 0 :(得分:0)

  <div class="input-container">
            <input class="search" type="search" />
            <span class="clearinput">x</span>
            <div style="clear:both;"></div>
        </div>

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


<script>

$(".search").on("focusin",function(e) {   
$('.clearinput').css('opacity','1');  

    });
    $(".search").on("focusout",function(e) {
      $('.clearinput').css('opacity','0'); 
        });

    $(document).on('click','.clearinput',function(e){

       $('.search').val('');
        });



</script>


 <style>
 .input-container{max-width: 250px;position: relative;}
 .search{    width: 100%;
 z-index:-1;position: absolute; 
    padding-right: 60px;}
 .clearinput{
     position: absolute;z-index:6;
     float: right;
     cursor: pointer;
    right: 10px;
    height: 25px;border:1px solid red;width:25px;font-size:32px;
    background-color:red;
/* display:none; */
    top: 0;}

</style>

你无法隐藏焦点进出,因为当我们清除或点击十字按钮时,它会聚焦,然后无法清除搜索字段。根据你的不好造型造型造型