jquery - jQuery函数检测非空输入并显示输入清除按钮

Question

我有现有的代码，当用户填写时在输入 #q 的末尾显示输入清除按钮，当输入变空时按钮消失：

$(document).on('propertychange keyup input paste pageinit', '#q', function(){
    var io = $(this).val().length ? 1 : 0 ;
    $(this).next('.icon_clear').stop().fadeTo(0,io);
}).on('click', '.icon_clear', function() {
    $(this).delay(0).fadeTo(0,0).prev('input').val('').focus();
});

index.php 的一部分：

<form id="searchForm" action="" class="search-box" method="POST">
<span class="clearable">
<input type="text" name="q" id="q" size="22" value="<?php echo $_GET['q']; ?>" autocomplete="off" maxlength="1024" class="search" placeholder="Search" >
<span class="icon_clear">&nbsp;&nbsp;&nbsp;</span>
</span>
</form>

jquery输入清除按钮示例

问题是：当用户键入一些文本并按回车键时，会调用 index.php?q=text。然后不会显示输入清除按钮，因为输入 #q 上没有发生任何事件（尽管 #q 包含按照 的文本值value="<?php echo $_GET['q']; ?>"）。因为#q 包含值，所以自然需要输入清除按钮。

只要输入#q 中有值，我如何更新脚本以便显示输入清除按钮。

Answer 1

你的意思是当页面初始化时，让它检查它是否需要一个清除按钮？这应该工作

http://jsfiddle.net/steelywing/PJZmv/1404/

$('input.data_field').trigger('input');

Answer 2

此解决方案特定于支持 HTML5 的浏览器（主要是 Chrome），但只要type="search"有内容，您就可以将“X”自动附加到输入框的末尾。

<input type="search"/>

jsFiddle：http: //jsfiddle.net/3mcJ8/

魔法。