网站开发中经常会用到鼠标或键盘事件，实现表单提交，获取用户输入值等功能，由于浏览器的不同，对回车的默认功能不尽相同。
在form表单中，往往需要输入多个input值，如果某个input值为空则不能提交表单（必填项），按下回车会自动提交表单，有些时候并不需要提交表单，只是验证输入值是否正确。
做这些开发是为了提高用户体验，用户习惯按TAB健进行input之间的切换，按回车提交表单。笔者也是慢慢摸索着不断学习，经实战总结出来。
onclick点击获取input值方法
JS部分
<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
var result,input
function record(){
result = document.getElementById("result").innerHTML;
input = document.getElementById("email").value;//email输入值
document.getElementById("result").innerHTML=input;//获取input值
}
</script>
HTML部分
<form> <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱"/> <p><input type="button" id="zhucenext" class="loginBtn" onclick="record()" value="点击获取input值"/></p> <p id="result"></p><!--获取的值在这里显示--> </form>
直接点击<input id="zhucenext"/>按钮能自动获取里面值，但是有时候我们会习惯用回车，请继续看如何实现增加键盘的回车键功能。
回车激活按钮事件获取input值
这里需要注意的是，一般input放在某个表单form表单内，在某些浏览器内，直接回车会自动提交表单。比如增加验证码之后，回车不执行提交表单。
回车键的键值是13，回车事件通用代码如下：
<input type="text" id="" name="" onkeypress="
if(event.keyCode==13){
zhucenext();//执行id为zhucenext的click事件，多个事件之间用英文的";"隔开
return false;//不执行表单提交
}"/>
点击事件和回车事件完整的应用实例
<!doctype html> <html> <head> <script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS <script type="text/javascript"> function record(){ var input=document.getElementById("email").value;//通过id获取需要验证的(input)表单元素的值 if(input==""){//如果获取的值为空 alert("请输入邮箱名");//弹出提示 return false;//返回false } var input2=document.getElementById("vdcode").value;//第二个需要验证的(input2)元素值，以此类推 if(input2==""){ alert("请输入验证码"); return false; } //判断为空值返回，不为空继续执行下面 var result=document.getElementById("result").innerHTML; document.getElementById("result").innerHTML=input;//设置只获取input（邮箱）的值 //执行其他命令直接写 menuShow('zhuceboxnonne'); } </script> </head> <body> <form method="post" action="new.php" name="form"> <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱" onkeypress="if(event.keyCode==13){record();return false;}"/></p><!--验证邮箱是否为空，是否通过回车都不提交表单--> <input type="text" class="intxt" id="vdcode" name="vdcode" placeholder="验证码" onkeypress="if(event.keyCode==13){record();return false;}"/><!--验证验证码是否为空，通过后回车执行表单提交，否则返回--> <img id="vdimgck" onclick="this.src=this.src+'?'" alt="看不清？点击更换" src="../include/vdimgck.php"/> <button type="submit" id="login" class="loginBtn" onclick="record()">提交表单</button></p><!--点击button提交表单，不能return false，否则无法提交表单--> </form> <p id="result"></p><!--获取的结果--> </body> </html>
这样就能实现一个回车执行多个input按钮事件，多个onkeypress需要用“;”隔开。
转载请注明来源网址：https://www.mubanyun.com/news/1429.html
皖公网安备 34010402703520号
发表评论
评论列表（条）