署理加盟 2019全新署理方案 挣钱+省钱左右开弓,独立渠道,丰盛赢利!

您现在的方位: unibet网 > 站长学院 > 建站教程 >

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

来历:不知道 发布时刻:2019-03-30热度:我要谈论
网站开发中经常会用到鼠标或键盘事情,完成表单提交,获取用户输入值等功用,因为浏览器的不同,对回车的默许功用不尽相同。 在form表单中,往往需求输入多个input值,假如某个input值为空则不能提交表单(必填项),按下回车会主动提交表单,有些时分并不需求提交表单...

unibet注册unibet淘宝店开业,好礼送不断

       网站开发中经常会用到鼠标或键盘事情,完成表单提交,获取用户输入值等功用,因为浏览器的不同,对回车的默许功用不尽相同。

       在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.m88nob1.com/news/1429.html

    责任编辑:unibet网

    宣布谈论

    谈论列表(条)