Javascript控制回车键进行表单(form)提交(转)

一、采用钩子事件去捕获

键盘事件有3个:

keydown,keypress,keyup分别是按下,按着没上抬,上抬键盘 。

$(document).keyup(function(event){
  if(event.keyCode ==13){
    $("#submit").trigger("click");
  }
});

推荐:keyup,防止笔记本键盘不小心触摸到。

1、有些文档中有写成这样:

$(window).keydown(function(){
...
})

XP系统IE6下是不成功的。

2、还有input的

$("input").keydown(function(){
...
})

这种情况要在input获取焦点时候,才能监听到键盘事件。

二、采用form表单的形式

1、回车测试:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>submit例子 - aspxhome.com</title>
</head>
<body>
    <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
    <h2>默认情况下,一个文本框的时候,提交,不管按钮type是submit还是button</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="button" value="提交">
    </form>
    <h2>一个文本框的时候怎么才能做到不提交,方法是加一个隐藏掉的文本框</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="text" style="display:none">
        <input type="button" value="提交">
    </form>
    <h2>只要有type为submit的按钮存在,一个文本框还是多个文本框都提交</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="submit" value="提交">
    </form>
    <h2>只要有type为submit的按钮存在,一个文本框还是多个文本框都提交</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="text">
        <input type="submit" value="提交">
    </form>
    <h2>多个文本框的时候,不提交,用type为button的按钮就行啦</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="text">
        <input type="button" value="提交">
    </form>
    <h2>用button元素时,FX和IE下有不同的表现</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="text">
        <button>提交</button>
    </form>
    <h2>radio和checkbox在FX下也会触发提交表单,在IE下不会</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="radio" name="a">
        <input type="checkbox" name="b">
        <input type="checkbox" name="c">
        <input type="button" value="提交">
    </form>
    <h2>type为image的按钮,等同于type为submit的效果</h2>
    <form action="http://www.csdn.net">
        <input type="text">
        <input type="text">
        <input type="image" src="/images/logo.gif">
    </form>
</body>
</html>  

2、在form标签中来禁止enter键提交:

<form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();"> 

3、可以在form中增加一个隐藏的输入框。

4、可以在type="test"中增加onkeypress="javascript:return gosearch();"方法。

参考:

http://www.cnblogs.com/soundcode/p/6607746.html(以上内容转自此篇文章)

http://blog.csdn.net/u010871655/article/details/51260878(以上内容小部分转自此篇文章)

时间: 2024-10-13 10:28:24

Javascript控制回车键进行表单(form)提交(转)的相关文章

ajax+FormData+javascript实现无刷新表单信息提交

ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-e

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

mvc表单Form提交 --实体

1.方式1:字段加验证 @model MvcWeb.Models.UserInfo @{ ViewBag.Title = "Add"; } <h2>Add</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.Label

JavaWeb学习总结(十一):Session解决form表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

JavaWeb学习总结(十三)——使用Session防止表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

JavaWeb---总结(十三)使用Session防止表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <

[Java拾遗五]使用Session防止表单重复提交

申明:此文章属于转载, 转自博客: http://www.cnblogs.com/xdp-gacl/p/3859416.html在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*&qu

JavaWeb防止表单重复提交(转载)

转载自:http://blog.csdn.net/ye1992/article/details/42873219 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pag

使用Session防止表单重复提交

一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <title>Form表单</title> 6 </head> 7 8 <bod