Предотвратить скрытие кнопки очистки при потере фокуса для ввода = "поиск" - PullRequest
Новая
       11

Предотвратить скрытие кнопки очистки при потере фокуса для ввода = "поиск"

0 голосов
/ 07 мая 2018

Я использую HTML5 

<input type="search" />

Как только вы начнете печатать, появится кнопка очистки ('x'). Пока это то, что я хочу. Но когда фокус больше не находится на поле ввода (хотя внутри все еще есть символы), кнопка очистки становится скрытой.

Как я могу предотвратить такое поведение?

Я хочу сохранить для пользователя этот дополнительный шаг, связанный с необходимостью сосредоточиться на поисковом вводе, чтобы очистить его. Таким образом, символ 'x' должен быть видимым, если во входных данных поиска содержится более 0 символов, независимо от того, где находится фокус.

1 Ответ

0 голосов
/ 07 мая 2018 
  <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>

вы не можете скрыть фокусировку, поскольку когда мы очищаем или нажимаем кнопку с крестиком, фокус запускается, а затем не удается очистить поля поиска. сделайте укладку в соответствии с вашим извинением за плохой укладки

...