代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 秀站网 > 站长学院 > 建站教程 >

获取input输入值回车按钮事件不提交表单

来源:未知 发布时间:2019-03-30热度: ℃我要评论
网站开发中经常会用到鼠标或键盘事件,实现表单提交,获取用户输入值等功能,由于浏览器的不同,对回车的默认功能不尽相同。 在form表单中,往往需要输入多个input值,如果某个input值为空则不能提交表单(必填项),按下回车会自动提交表单,有些时候并不需要提交表单...

崖柏造假过程模板秀站淘宝店开业,好礼送不停

? ? ? ?网站开发中经常会用到鼠标或键盘事件,实现表单提交,获取用户输入值等功能,由于浏览器的不同,对回车的默认功能不尽相同。

? ? ? ?在form表单中,往往需要输入多个input值,如果某个input值为空则不能提交表单(必填项),按下回车会自动提交表单,有些时候并不需要提交表单,只是验证输入值是否正确。

? ? ? ?做这些开发是为了提高用户体验,用户习惯按TAB健进行input之间的切换,按回车提交表单。笔者也是慢慢摸索着不断学习,经实战总结出来。

onclick点击获取input值方法

JS部分

//引用公共JS

HTML部分

email" name="email" placeholder="输入邮箱"/>

zhucenext" class="loginBtn" onclick="record()" value="点击获取input值"/>

result">

? ? ? 直接点击按钮能自动获取里面值,但是有时候我们会习惯用回车,请继续看如何实现增加键盘的回车键功能。

回车激活按钮事件获取input值

? ? ? ?这里需要注意的是,一般input放在某个表单form表单内,在某些浏览器内,直接回车会自动提交表单。比如增加验证码之后,回车不执行提交表单。

? ? ? ?回车键的键值是13,回车事件通用代码如下:

点击事件和回车事件完整的应用实例




//引用公共JS



email" name="email" placeholder="输入邮箱" onkeypress="if(event.keyCode==13){record();return false;}"/> vdcode" name="vdcode" placeholder="验证码" onkeypress="if(event.keyCode==13){record();return false;}"/> 看不清?点击更换

result">

? ? ? ?这样就能实现一个回车执行多个input按钮事件,多个onkeypress需要用“;”隔开。

本文地址:https://www.xiuzhanwang.com/news/1429.html

    责任编辑:秀站网

    发表评论

    评论列表(条)