清除键盘打开时在iOS / iPad中不起作用的所有文本图标

Clear All text icon not working in iOS/iPad when keypad open

本文关键字：不起作用 图标 文本 iPad 键盘 iOS 清除      更新时间：2023-09-26

我有一个搜索文本框，它有一个清除全部图标，可以清除文本。

注意：我没有使用HTML5默认清除所有图标，而是使用自定义清除所有图标。

它在大多数浏览器和安卓手机上都能正常工作。

但是在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();
        });

激活iPhone键盘控件后，您将无法在该元素上调用javascript。如果单击事件绑定到不同的元素，那么它将起作用。

例如，您可以在代码周围包装一个div，并将其样式设置为看起来像一个输入框。

<div>
  <input type="text">
  <a href="" onclick="clearFunction();">X</a>
</div>
相关文章：