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
  • 相关阅读:
    利用cubieboard设置samba打印服务器
    CubieTruck上安装mjpg_streamer
    devexpress bandgridview使用总结(14.2)
    WeedFS0.6.8-引用库列表
    NSQ的消息订阅发布测试
    WeedFS问题收集
    WeedFS依赖库 0.6.1
    golang 前置补0
    MsChart<3> 饼状图
    在代码中去掉窗口,全屏显示
  • 原文地址:https://www.cnblogs.com/hui-run/p/6566448.html
Copyright © 2011-2022 走看看