前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

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

作者头像
风柏杨4711
发布2021-03-15 10:58:48
1.9K0
发布2021-03-15 10:58:48
举报
文章被收录于专栏:技术小牛

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

按照错误信息及现象(页面跳转了)来看,应该是因为触发了页面提交了,但事实上,当在keyup事件里面alert时,根本还没有执行到keyup事件里面去就已经跳转了。于是搜索了一些资料来看,结果发现html规范的一种约定:如果一个form里只有一个input,那么无论有无submit按钮或绑定事件,只要在这个焦点在这个input里并且按下回车按钮时,都会执行自动提交表单的操作。看到这里,我恍然大悟了。

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

代码语言:javascript
复制
/**
 * 关键词输入框回车事件触发搜索
 */
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;
	}
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014/06/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档