2

定义一个搜索框 如果输入框有文字，输入框会显示一个清除按钮，如何获取清除按钮的点击事件？

<label for="search-mini">Search Input:</label>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
4

4 回答 4

4

带有类的清晰锚按钮type=search增强了输入。您可以将事件附加到该按钮，如下所示。<a>ui-input-clear

演示

$(document).on('click', '.ui-input-clear', function () {
  alert('text cleared');
});
于 2013-07-14T01:00:31.623 回答
1

只需使用.click()jQuery 附带的侦听器即可。例子：

$('#clear-button').click(function(){
    $('#search-box').val('');
    // OR WHATEVER OTHER CODE YOU WANT TO RUN WHEN BUTTON IS CLICKED
});

假设您的按钮的“id”属性是“clear-button”。

希望这可以帮助。

于 2013-07-12T17:18:23.307 回答
1

对 Omar 的回答进行一些改进，您可以使用选择器获得更具体的信息，以便事件不会监听ui-input-clear类中的每个元素。

演示

HTML：

<div id="search-container">
    <label for="search-mini">Search Input:</label>
    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>

JS：

$(document).on('click', '#search-container .ui-input-clear', function () {
  alert('text cleared');
});
于 2014-04-01T18:24:53.380 回答
0

使用.click()和.val()：

JAVASCRIPT：

$(function(){
    $('#clear').click(function(){
        $('#search').val('');
    });
});

HTML：

<input type="text" id="search" />
<button id="clear">Clear</button>

演示：http: //jsfiddle.net/dirtyd77/KPZMQ/

于 2013-07-12T17:19:10.830 回答