zoukankan      html  css  js  c++  java
  • AnjularJS表单回车提交事件

    问题:

    输入手机号之后,再验证码输入框点击回车时,触发发送验证码事件。

    <div class="login-main">
    <form name="loginMobileForm" class="" novalidate>
    <div class="form-group">
    <label class="col-sm-2 control-label login-label">手机号</label>
    <div class="col-sm-10">
    <input class="form-control login-input" placeholder="请输入手机号" name="mobile" ng-model="login.mobile" ng-pattern="/^1[34578]d{9}$/"
    required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label login-label">验证码</label>
    <div class="col-sm-10">
    <div class="col-sm-8">
    <input class="form-control login-input ml-15" placeholder="请输入4位验证码" name="validCode"
    ng-model="login.validCode" ng-minlength="4" ng-maxlength="4" required>
    </div>
    <div class="col-sm-2">
    <button class="btn btn-primary ml-15" ng-click="sendSmsCode()" ng-hide="timeButtonDisabled" ng-disabled="loginMobileForm.mobile.$invalid">发送验证码</button>
    <button class="btn btn-primary ml-15" ng-disabled="true" ng-hide="!timeButtonDisabled">{{text}}</button>
    </div>
    </div>
    </div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
    <div class="col-sm-8">
    <p class="text-left text-danger ng-hide" ng-show="loginError" ng-bind="loginMsg"></p>
    </div>
    </div>
    </div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" ng-click="submitMobileLoginForm()" class="btn btn-primary" ng-disabled="loginMobileForm.$invalid"
    ng-bind="btnLoading">LOGN
    </button>
    <!--<button class="btn btn-primary" ng-click="loginTypeToggle()" >用户名登陆</button>-->
    </div>
    </div>
    </form>
    </div>

    解决办法:
    button默认的type是submit,点回车就触发了提交,下面两个button加上类型 type="button"就可以了
    <button class="btn btn-primary ml-15" ng-click="sendSmsCode()" ng-hide="timeButtonDisabled" ng-disabled="loginMobileForm.mobile.$invalid">发送验证码</button>
    <button class="btn btn-primary ml-15" ng-disabled="true" ng-hide="!timeButtonDisabled">{{text}}</button>。

    表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的button元素(包括type='submit'的input标签,以及type='submit'的button元素,button默认type为submit),
    而按enter键会触发form表单提交,这称为隐式提交。这是为了让那些使用辅助阅读工具使用者(比如屏幕阅读器)或不方便使用鼠标者所设立的。
    当用户在一个表单的input标签按enter按钮时,浏览器会找到表单中的第一个提交按钮(submit button),并触发click,同时提交表单。
    如果一个表单里没有任何submit button。当这个表单只有一个input元素时,在这个input标签按enter键会隐式触发表单提交,
    但表单有多个input标签时就不会触发。

    更多信息查阅-form表单
     
    博客地址迁移,博客目前更新在 csdn: https://blog.csdn.net/H_Rhui
  • 相关阅读:
    servlet的运行机制,转发和重定向
    http协议,servlet的生命周期
    junit,面向切面开发(动态代理),工厂设计模式,数据库连接池
    JDBC 连接mysql数据库
    20169201 2016-2017-2 《移动平台应用开发实践》 第七周学习总结
    20169201 2016-2017-2 《网络攻防实践》第七周学习总结
    20169201 2016-2017-2 《移动平台应用开发实践》 第六周学习总结
    20169201 2016-2017-2 《网络攻防实践》第六周学习总结
    20169201 2016-2017-2 《网络攻防实践》第五周学习总结
    20169201 2016-2017-2 《移动平台应用开发实践》 第五周学习总结
  • 原文地址:https://www.cnblogs.com/hui-run/p/6566448.html
Copyright © 2011-2022 走看看