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

我有一个现有代码，当用户填写时，在输入#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>

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


此解决方案特定于支持HTML5的浏览器（主要是Chrome），但您可以包括
type=“search”
，以便在输入框的末尾自动添加一个“X”，只要有内容

<input type="search"/>



jsFiddle：

神奇。
如果我理解正确，您需要触发一个更改事件来检查用户使用enter键提交的页面刷新输入，对吗？将jquery函数绑定到pageload上，或仅绑定到值上，而不是整个文档。@tymeJV:correct。在页面刷新时，值保留在输入中，所以我想清除要显示的文本按钮，但在当前脚本中，它不是。@codelio:请用一个具体的工作示例。我是javascript新手，可能无法实现您的想法。谢谢梁咏琪。这个例子看起来不错。但是id=q是用来在我的实际代码中声明输入的，我尝试输入$（“#q”）.trigger（“#q”），但它不起作用。有什么想法吗？谢谢。您应该使用
$（'#q'）。触发器（'input'）
，这里的
input
是一个事件
<input type="search"/>