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

作者: 本站原创发布时间:2019-03-30 浏览: 次

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

在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需要用“;”隔开。

上一篇：网站图片Lazyload延迟加载技术

下一篇：网页模板实现瀑布流效果代码