由于没有一个解决方案能够真正满足我们的需求，我们想出了一个简单的jQuery插件，叫做jQuery- clearsearch -

使用它就像:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

​ 例如:http://jsfiddle.net/wldaunfr/FERw3/

我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button

我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码使其工作

下面是演示链接

http://codepen.io/shidhincr/pen/ICLBD

如果你想让它像谷歌一样，那么你应该知道“X”实际上并不在<input>中——它们是彼此相邻的，外部容器样式看起来像文本框。

HTML:

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

CSS:

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

例如:http://jsfiddle.net/VTvNX/

在输入中添加type="search" 支持是相当不错的，但将无法在IE<10

= >“搜索”型输入<

老版本浏览器

如果你需要IE9支持，这里有一些变通方法

使用标准的<input type="text">和一些HTML元素:

/** * Clearable text inputs */ $(".clearable").each(function() { const $inp = $(this).find("input:text"), $cle = $(this).find(".clearable__clear"); $inp.on("input", function(){ $cle.toggle(!!this.value); }); $cle.on("touchstart click", function(e) { e.preventDefault(); $inp.val("").trigger("input"); }); }); /* Clearable text inputs */ .clearable{ position: relative; display: inline-block; } .clearable input[type=text]{ padding-right: 24px; width: 100%; box-sizing: border-box; } .clearable__clear{ display: none; position: absolute; right:0; top:0; padding: 0 8px; font-style: normal; font-size: 1.2em; user-select: none; cursor: pointer; } .clearable input::-ms-clear { /* Remove IE default X */ display: none; } <span class="clearable"> <input type="text" name="" value="" placeholder=""> <i class="clearable__clear">&times;</i> </span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

只使用<input class="clearable" type="text">(没有附加元素)

设置class="clearable"并使用它的背景图像:

/** * Clearable text inputs */ 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-18 < e.clientX-this.getBoundingClientRect().left)]("onX"); }).on("touchstart click", ".onX", function( ev ){ ev.preventDefault(); $(this).removeClass("x onX").val("").change(); }); // $('.clearable').trigger("input"); // Uncomment the line above if you pre-fill values from LS or server /* Clearable text inputs */ .clearable{ background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center; border: 1px solid #999; padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */ border-radius: 3px; transition: background 0.4s; } .clearable.x { background-position: right 5px center; } /* (jQ) Show icon */ .clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */ .clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */ <input class="clearable" type="text" name="" value="" placeholder="" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center). That 18px padding will prevent the text hide underneath the icon (while visible). jQuery will add the class "x" (if input has value) showing the clear icon. Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX. Clicking the onX class removes all classes, resets the input value and hides the icon.

7x7px 动图：

Base64字符串:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

jQuery Mobile现在内置了:

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Jquery移动API TextInput文档