取消回车自动提交表单

最新推荐文章于 2024-07-11 16:15:56 发布

kungfu_panda

最新推荐文章于 2024-07-11 16:15:56 发布

阅读量1w

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/kungfu_panda/article/details/39432817

版权

前端开发专栏收录该内容

118 篇文章 1 订阅

订阅专栏

1、如果form里面只有一个input type＝text，那么无论有没有submit按钮，在input中回车都会提交表单。

如果不想回车提交，需要再加一个input type=text，然后设置display:none.

2、如果form里面多于一个input type＝text，那么必须有一个submit按钮才可以回车提交表单。

按钮可以是input也可以是button，他们应设置type=submit。

如果只写button而不写type，那么IE下type＝button，FF下则是type＝submit。

示例代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <script src="../string/jquery-1.11.1.min.js"></script>
</head>
<body>
    <form <span style="color:#FF0000;">name="myform"</span> action="http://www.baidu.com" type="post" <span style="color:#FF0000;">id="myform"</span>>
        <input type="text" id="keyword">
        <input type="text" style="display:none;">
        <input type="button" id="mysubmit" value="跳转">
    </form>
</body>
<script>
    $("#mysubmit").click(function () {
        <span style="color:#FF0000;">$("#myform").submit();//写法1
        //document.myform.submit();//写法2,myform是form的name</span>
    })
    $("#keyword").keyup(function (e) {
        if(e.keyCode == 13){
            window.location.href="http://www.csdn.net";
            //window.open("http://www.csdn.net");
        }
    })
</script>
</html>

PS:<button> </button>

<html>
<body>

<form action="/example/html/form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button" >button</button>
</form>

</body>
</html>

附加参考文档：http://taoistwar.iteye.com/blog/424861