IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > javascript >

form表单按回车提交表单的方法

2014-12-22 17:08 来源: IT技术学习网原创 阅读:

本文给大家讲述如何在html中实现form表单按回车提交的实现方法。整个页面的提交,需要使用到js。

1.如果页面焦点在输入的input中,那么直接按enter,浏览器就会自动提交

网上有文章说,如果表单里有一个type=”submit”的按钮,回车键生效。如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。itjsxx.com在测试中,没感觉在这种情况下回车会有效。如果焦点在input输入框中,浏览器会自动提交,我不觉得这跟一个text的input,一个submit什么的有关。如果焦点是整个页面,按回车无任何反应。

2.本文讲述的重点,是为大家实现当焦点是整个页面,不在任何一个input上的时候,如何实现按回车提交整个form表单。

我想这也是大多数朋友们想真正实现的情况。网上提到的很多方法都不靠谱,说多了都是泪啊。在第一点中咱们已经提到,把焦点至于input表单中,按回车浏览器就会自动提交表单,那么,我们只需要在按下回车的时候,用js将焦点设置到页面中的某一个input上,那么及时按回车之前,我们的焦点是整个页面,按回车的时候,焦点已自动转移到某一个input标签上,浏览器也会自动帮我们提交了。

js实现代码非常简单,兼容火狐和IE,只需要把这个代码加入到任意html页面中即可,代码如下:

<script type="text/javascript">
document.onkeydown = function(e){
        if((e.keyCode || e.which) == 13){
            var focusinput=document.getElementById("title")  //请根据自身页面情况选择一个input id名,我这里是title
            focusinput.focus();//获取焦点
        }
    }
</script>

回车提交表单问题解决完毕。如果以上代码对您有效,还请来点个赞,回个帖啥的,谢谢诸位。

form表单按回车提交表单的方法
转载需注明出处:IT技术学习网 http://www.itjsxx.com/javascript/enter_submit.html

评论文章 form表单按回车提交表单的方法
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图