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

【问题标题】：Prevent hiding clear button on losing focus for input="search"防止在输入=“搜索”失去焦点时隐藏清除按钮
【发布时间】：2018-10-17 15:09:43
【问题描述】：

我使用 HTML5

&lt;input type="search" /&gt;

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

如何防止这种行为？

我想节省用户必须重新关注搜索输入以清除它的额外步骤。因此，只要搜索输入中的字符数超过 0 个，无论焦点在哪里，“x”都应该可见。

【问题讨论】：

对于我来说，在 Chrome 中只需将鼠标悬停在搜索框上就会显示清除它的 x
@j08691 首先，作为用户，您需要知道这一点，其次，这在触摸屏上不起作用。

标签： html search input focus

【解决方案1】：

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

您不能隐藏焦点进出，因为当我们清除或单击十字按钮时，它会运行焦点然后无法清除搜索字段。根据您对不良造型的抱歉进行造型

【讨论】：