Очистить Все текстовые иконки, не работающие в iOS/iPad, когда клавиатура открыта

Question

У меня есть текстовое поле поиска, в котором есть ясный значок, который очищает текст.

Примечание: я не использую HTML5 по умолчанию, чтобы очистить все иконки &, вместо этого пользовательский значок «Очистить все».

Он отлично работает на большинстве браузеров, а также на телефонах Android.

Но на iPad/iphone, если клавиатура открыта, она не очищает текст при щелчке по значку. Если клавиатура закрыта, она очищает текст.

Не знаю, почему. Если кто-то может помочь.

Вот код: Также здесь рабочий jsFiddle - http://jsfiddle.net/8m9oeymx/

HTML:

<input class="clearable" type="search" id="searchTerm" value="" placeholder="Start typing fund name" /> 

CSS:

input[type="search"] { 
-webkit-appearance: none; 
} 

input[type="search"]::-ms-clear { 
width : 0; 
height: 0; 
} 

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { display: none; } 

.clearable { 
background: 
url(data:image/gif;base64,R0lGODlhBwAHAIAAAP/// 
5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=); 
background-repeat:no-repeat; 
background-color: #fff; 
background-position: left -98% center; 
background-position-x: -98%; 
line-height: 1.7em; 
width: 70%; 
} 

.clearable.x { 
     background-position: left 99% center; 
     background-position-x: 99%; 
     background-position-y: 40%; 
     } 
    .clearable.onX{ cursor: pointer; } 

JAVASCRIPT:

function tog(v) { return v ? 'addClass' : 'removeClass'; } 

     $(document).on('input', '.clearable', function() { 
      $(this)[tog(this.value)]('x'); 
     }).on('mousemove', '.x', function (e) { 
      $(this)[tog(this.offsetWidth - 30 < e.screenX - this.getBoundingClientRect().left)]('onX'); 
     }).on('click', '.onX', function() { 
      $(this).removeClass('x onX').val('').change(); 
      autocompleteSearch(); 
     }); 

Answer 1

Когда-й e Управление клавиатурой iPhone активировано, вы не сможете использовать ваш javascript для этого элемента. Если событие click было привязано к другому элементу, это сработало бы.

Вы можете, например, обернуть div вокруг вашего кода и создать его как окно ввода.

<div> 
    <input type="text"> 
    <a href="" onclick="clearFunction();">X</a> 
</div>