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>

An example of jquery input-clear button

问题是：当用户键入某些文本并按回车键时，会调用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/

魔术。