不需要包含CSS或图像文件。不需要包含整个沉重的jQuery UI库。我写了一个轻量级的jQuery插件，为你做的魔法。你所需要的只是jQuery和插件。=）

jQuery InputSearch演示。

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

使用它就像:

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

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

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

在输入中添加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=

编辑:我找到了这个链接。希望能有所帮助。http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

您提到过希望它位于输入文本的右侧。所以，最好的方法是在输入框旁边创建一个图像。如果要查看方框内的内容，可以使用背景图像，但可能无法编写脚本来清除方框。

因此，插入和图像并编写JavaScript代码来清除文本框。

使用jquery插件，我已经适应了我的需要，添加自定义选项和创建一个新的插件。你可以在这里找到它: https://github.com/david-dlc-cerezo/jquery-clearField

下面是一个简单用法的例子:

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

获得像这样的东西:

jQuery Mobile现在内置了:

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

Jquery移动API TextInput文档