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

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-search 是焦点，因此它不应该将事件发送到清除按钮。关于如何解决这个问题的任何想法？

Answer 1

使用 jQuery 提交事件，而不是点击，像这样：

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

    evt.preventDefault();

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

} );