当前位置 : 主页 > WEB开发 > 正文

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

重庆seo[原创]2016-06-27阅读()php开发用户体验JSA+ / A-

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

       在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.vi586.com/web/303.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,转载请保留出处!别浪费时间复制粘贴,早就提交URL了。

    赞(4)