Question

我使用HTML5

＆＃13;

<input type="search" />

＆＃13;

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

如何防止这种行为？

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

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

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

在输入失去焦点时防止隐藏清除按钮=＆＃34;搜索＆＃34;

1 个答案: