• 人民网评:异地医保的步子还需更大一些 2019-07-18
  • 敢想敢拼的邹市明:用奥运精神助推青少年体育事业发展 2019-07-13
  • 改革开放40年——从全国糖酒会看酒业跌宕起伏酒业 中国 2019-07-13
  • 这三个史无前例,让美国有点懵了 2019-07-11
  • 文创大咖齐聚成都 共话“一带一路”文化交流 2019-07-06
  • 农历五月初二 唐代高僧雪峰义存禅师圆寂纪念日 2019-07-06
  • 山西与腾讯公司签署战略合作协议 2019-07-04
  • 山西:“四好农村路” 致富添门路 2019-07-02
  • 【专题】社会主义核心价值观主题微电影优秀作品展示 2019-07-02
  • 《钟馗捉妖记》杨旭文为魔族惨烈“献身” 2019-06-10
  • 个税法迎第七次大修 起征点由每月3500元提高至5000元 2019-06-10
  • 摄影师捕捉超强EF3龙卷风 巨大云团画面惊险壮观 2019-05-26
  • 农民夜校成十九大精神宣讲重要课堂 2019-05-25
  • 拆迁款分配引冲突 儿子推倒八旬老父致其死亡 2019-05-25
  • 2017年邵逸夫奖在港颁奖 5位科学家获此殊荣 2019-05-23
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 11选5任四包赚不赔40注 > 站长学院 > 建站教程 >

    11选5杀号精准公式99%:获取input输入值回车按钮事件不提交表单

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

    11选5任四包赚不赔40注 www.zo-n.com

           网站开发中经?;嵊玫绞蟊昊蚣淌录?,实现表单提交,获取用户输入值等功能,由于浏览器的不同,对回车的默认功能不尽相同。

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

    本文地址://www.zo-n.com/news/1429.html

      发表评论

      评论列表(条)

      • 人民网评:异地医保的步子还需更大一些 2019-07-18
      • 敢想敢拼的邹市明:用奥运精神助推青少年体育事业发展 2019-07-13
      • 改革开放40年——从全国糖酒会看酒业跌宕起伏酒业 中国 2019-07-13
      • 这三个史无前例,让美国有点懵了 2019-07-11
      • 文创大咖齐聚成都 共话“一带一路”文化交流 2019-07-06
      • 农历五月初二 唐代高僧雪峰义存禅师圆寂纪念日 2019-07-06
      • 山西与腾讯公司签署战略合作协议 2019-07-04
      • 山西:“四好农村路” 致富添门路 2019-07-02
      • 【专题】社会主义核心价值观主题微电影优秀作品展示 2019-07-02
      • 《钟馗捉妖记》杨旭文为魔族惨烈“献身” 2019-06-10
      • 个税法迎第七次大修 起征点由每月3500元提高至5000元 2019-06-10
      • 摄影师捕捉超强EF3龙卷风 巨大云团画面惊险壮观 2019-05-26
      • 农民夜校成十九大精神宣讲重要课堂 2019-05-25
      • 拆迁款分配引冲突 儿子推倒八旬老父致其死亡 2019-05-25
      • 2017年邵逸夫奖在港颁奖 5位科学家获此殊荣 2019-05-23
      • 河南快赢481走势 香港六合彩今天晚上开什么 海南私彩头尾规律 极速十一选五彩票平台 黑龙江时时彩号码走势 一码中特现场摇奖软件 查今晚广东36选7开奖结果 香港特码资料网 福彩3d号码冷热表 南昌棋牌游戏室内 快乐12四川开奖 6粒复式二中二多少组 湖南彩票网首页 中国体育彩票浙江6十1 一二三期特码资料