javascript - 使函数在 onClick 和 onKeypress JQuery/Javascript 上可用？

Question

我想让我的功能可供用户使用，如果他们单击按钮，但如果他们也按 Enter 键。这是示例:

$('#searchBtn').on('click', function searchUser(){
    $.ajax({
      type: 'POST',
      url: 'Components/Application.cfc?method=findUser',
      data: {'searchFldVal':searchFldVal},
        dataType: 'json'
    }).done(function(obj){
        return true;
      }else{
        return false;
      }
        });

        return false;
      }
    }).fail(function(jqXHR, textStatus, errorThrown){
      alert(errorThrown);
    });
  }
});

<form name="searchForm" id="searchForm" action="#" method="POST" onsubmit="searchUser()">
	<div>
		<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
	</div>
	<div>
		<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
	</div>
</form>

如果我单击按钮，上面的代码可以正常工作，但如果我输入几个字母并按 Enter 键，我的页面将重新加载。该文件保存为 .cfm 文件。我想在 onClick 和 onKeypress 上运行 searchUser() 函数。如果有人知道如何实现这一点，请告诉我。

Answer 1

由于您使用的是 jQuery，因此请勿使用内联事件处理程序。定义函数并在提交表单时调用它，如下所示:

function searchUser(e) {
  e.preventDefault();
  alert ("Do your ajax here instead of alert...");
}

$("#searchForm").on("submit", searchUser);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="searchForm" id="searchForm" action="#" method="POST">
	<div>
		<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
	</div>
	<div>
		<input type="submit" name="searchBtn" id="searchBtn" value="Search"/>
	</div>
</form>

注意:

• 从表单中删除了内联事件处理程序
• 更改了提交按钮类型。