在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

Posted 2020-09-10 wzjhoutai

前些时间在做一个搜索功能时发现一个比較有意思的现象，场景是这种：在一个模态窗体中是一个订单列表。页面的顶部有若干个状态筛选框和一个搜索keyword输入框，当焦点在keyword输入框时按回车，本来是对input的keyup事件做了监听。当发现是按了回车键时便自己主动提交搜索请求的，但输入keyword后按回车时页面居然跳转了。而且出现“HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面。由于使用了无效方法(HTTP 谓词)”的错误，很纳闷。

依照错误信息及现象（页面跳转了）来看。应该是由于触发了页面提交了。但其实。当在keyup事件里面alert时，根本还没有运行到keyup事件里面去就已经跳转了。

于是搜索了一些资料来看。结果发现html规范的一种约定：假设一个form里仅仅有一个input。那么不管有无submitbutton或绑定事件，仅仅要在这个焦点在这个input里而且按下回车button时，都会运行自己主动提交表单的操作。看到这里。我恍然大悟了。

找到了原因。解决的办法也就出来了。自己主动提交的动作本身浏览器在默认事件中绑定的，按键盘的操作就是keyup和keydown，我原本的按键监听是在keyup事件里写的。所以把keydown事件重写，然后终止默认事件运行就OK了。我的代码例如以下。供遇到相同问题的朋友參考：

/**
 * 关键词输入框回车事件触发搜索
 */
win.find(‘input[name="keyword"]‘).bind(‘keyup‘, function(e){
	var ev = document.all?window.event:e;
	if(ev.keyCode === 13){
		$("a.search", win).click();
	}
}).bind(‘keydown‘, function(e){
	var ev = document.all?window.event:e;
	if(ev.keyCode === 13){
		return false;
	}
});