使用清除按钮捕获输入上的搜索按钮事件

Question

我的应用程序html中有以下内容：

 <form>
     <input id="txt-search" type="search">
     <button id="btn-clear"><i icon="ion-android-cancel"></i></button>
 </form>

我的JavaScript：

$( document ).on( "click", "#btn-clear", function( evt ) {

    evt.preventDefault();

    $( "#txt-search" ).val("");
    $( "#txt-search" ).focus();
    $( "#btn-clear" ).hide();

} );

我遇到的问题是当用户点击iOS中虚拟键盘上的“搜索”按钮时，单击了清除按钮。我不明白为什么会这样。 txt搜索是焦点，因此它不应该将事件发送到清除按钮。关于我如何解决这个问题的任何想法？

Answer 1

使用jQuery提交事件，而不是点击，如下所示：

$( "#txt-search" ).on( "submit", function( evt ) {

    evt.preventDefault();

    $( "#txt-search" ).val("");
    $( "#txt-search" ).focus();
    $( "#btn-clear" ).hide();

} );