前些时间在做一个搜索功能时发现一个比較有意思的现象,场景是这种:在一个模态窗体中是一个订单列表。页面的顶部有若干个状态筛选框和一个搜索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;
}
});

在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed的更多相关文章

  1. Asp.Net Core IIS发布后PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词)

    一.在使用Asp.net WebAPI 或Asp.Net Core WebAPI 时 ,如果使用了Delete请求谓词,本地生产环境正常,线上发布环境报错. 服务器返回405,请求谓词无效. 二.问题 ...

  2. HTTP 错误 405.0 - Method Not Allowed 无法显示您正在查找的页面,因为使用了无效方法(HTTP 谓词)。

    x 前言:报错信息 HTTP 错误 405.0 - Method Not Allowed 无法显示您正在查找的页面,因为使用了无效方法(HTTP 谓词). 发送至 Web 服务器的请求使用了为处理该请 ...

  3. 程序中使用ajax时,type为put,或者delete时在 IIS上没效果,发生HTTP Error 405.0 - Method Not Allowed

    其实使用put delete  是在创建webapi中基本才会使用. WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协 ...

  4. [环境搭建]-Web Api搭建到IIS服务器后PUT请求返回HTTP Error 405.0 - Method Not Allowed 解决方法 转摘:http://blog.csdn.net/qiujuer/article/details/23827531

    尝试使用微软的Web Api,他的确是一个很有意思的东西. 让我体会到了许多的方便,但是我发现部署到IIS服务器上去了后PUT和Delete请求将返回405. 原因是IIS的默认处理程序默认情况下只允 ...

  5. HTTP Error 405.0 - Method Not Allowed 无法显示您正在查找的页面,因为使用了无效方法(HTTP 谓词)。

    将submit改成button即可   因为触发了form表单

  6. input中空格后的数据不显示

    bug,input中空格后的数据不显示     昨天在修bug,有一个bug是用户修改的个人信息的地址栏,输入有空格的话,空格后面的内容存不上,而且没有报错,奇怪了,只好跟踪下. 页面上的输入框就是个 ...

  7. ASP.Net WebAPI HttpDelete/PUT方法运行或发布到生产服务器上后出现405(Method Not Allowed)错误的解决办法

    原文:ASP.Net WebAPI HttpDelete/PUT方法运行或发布到生产服务器上后出现405(Method Not Allowed)错误的解决办法 本文只是个人的理解和学习记录,如果觉得本 ...

  8. 【转载】input 中 type='text' 的提交问题

    原文链接:http://www.nowamagic.net/html/html_AboutInputSummit.php 有时候我们希望回车键敲在文本框(input element)里来提交表单(fo ...

  9. 阻止form元素内的input标签回车提交表单

    <form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...

随机推荐

  1. Spring +Mybatis 企业应用实战(脑图)

  2. PHP中curl的使用

    cURL 函数 curl_close — 关闭一个cURL会话 curl_copy_handle — 复制一个cURL句柄和它的所有选项 curl_errno — 返回最后一次的错误号 curl_er ...

  3. IOS开发之瀑布流照片墙实现

    想必大家已经对互联网传统的照片布局方式司空见惯了,这种行列分明的布局虽然对用户来说简洁明了,但是长久的使用难免会产生审美疲劳.现在网上流行一种叫做“瀑布流”的照片布局样式,这种行与列参差不齐的状态着实 ...

  4. 配置Eclipse 3.3 + tomcat 6.0 + lomboz 3.3进行Web开发

    http://www.cnblogs.com/xtsong/articles/1203155.html我以前编程用的都是Eclipse 3.2,这次跑到www.eclipse.org上去溜达了一番,发 ...

  5. vi/vim 计算搜寻关键字数量

    http://hi.baidu.com/xletian/blog/item/f19962061a9a506c020881dc.html 在看过 vim 的全域指令和 search 指令之後,你会不会也 ...

  6. python学习笔记013——模块

    1 模块module 1.1 模块是什么 模块是包含一系列的变量,函数,类等程序组 模块通常是一个文件,以.py结尾 1.2 模块的作用 1. 让一些相关的函数,变量,类等有逻辑的组织在一起,使逻辑更 ...

  7. 进程在Linux内核中的角色扮演

    在Linux内核中,内核将进程.线程和内核线程一视同仁,即内核使用唯一的数据结构task_struct来分别表示他们:内核使用相同的调度算法对这三者进行调度:并且内核也使用同一个函数do_fork() ...

  8. Unix环境高级编程(十七)网络IPC套接字

    通过网络套接字可以使得不同计算机上运行的进程相互通信. 1.创建套接字 #include <sys/socket.h> Int socket( int domain, int type, ...

  9. Vue 最传统的新增行,删除行,提交的数据整合

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  10. django1.8中如何显示图片,应用css样式,javascript事件

    在django中将图片.javascript.css称为静态文件.如何将这些静态文件显示在django中呢?近期做一个项目,一直困扰着我,后来查找各种资源,终于在官方文档中找到. 官方文档链接 在se ...