关于angularjs框架中input按回车事件光标跳转到另一个input上

最新推荐文章于 2026-07-07 12:24:07 发布

原创最新推荐文章于 2026-07-07 12:24:07 发布 · 6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

angularjs

本文介绍了如何在AngularJS项目中自定义指令来实现在输入框按下回车键时自动跳转到下一个输入框的功能，通过在HTML页面中设置全局指令属性，实现输入框之间的联动，简化了用户操作流程。

我们项目里用到angularjs 对应的包，没有ng-keypress\ng-keydown。所以，我们自己写一些指令。首先在，项目模块对应的module.js中写指令

define([
    'angular',
    'angular-couch-potato',
    'angular-ui-router',
    'angular-resource'
],  function (ng, couchPotato) {
    'use strict';

    var module = ng.module('app.handOverWithdrawals', [
        'ui.router',
        'ngResource'
    ]);

     ##在html页面中 设置angularjs全局的指令属性
    module.directive('searchinput', function () {
                return {
                    restrict: 'A',
                    controller: function(){
                        var allInputs = [];
                        this.getAll = function( ele ){
                            allInputs.push( ele );
                        };
                        this.focusInput = function( ele ){
                            angular.forEach(allInputs, function( input,index ) {
                                //if (ele === input) {
                                //    allInputs[index+1][0].focus();
                                //}
                                if ( ele === input && allInputs[index+3] ) {
                                    allInputs[index+3][0].focus();
                                }
                            });
                        };

            }
        };
    });

##在html页面中input输入框，设置angularjs回车换行指令属性

    module.directive('enternextline', function () {
        return {
            restrict: 'A',
            require : '^searchinput',
            link: function (scope, element, attrs, searchinputCtrl) {
                searchinputCtrl.getAll( element );
                element.bind('keypress',function(event){
                    if(event.keyCode == '13'){
                        searchinputCtrl.focusInput( element );
                    }
                });
            }
        };
    });
      couchPotato.configureApp(module);

    module.run(function($couchPotato){
        module.lazy = $couchPotato;
    });

    return module;

});

html页面：
<form  class="smart-form" id="checkout-form"  searchinput>
<div  class="col col-lg-2">
      <section>
          <div class="form-group">
              <input type="text" `enternextline` name="count_wzq" data-ng-model="list.count_wzq" style="text-align:right;"  onkeyup="value=this.value.replace(/[^0-9\-\+]/gi,'')" ng-change="onChange(this)">
     </div>
 </section>
</div>
</form>

######值得注意的是： 按下回车 与提交表单按钮；当输入框是多个时。
 <button type="button" class="btn btn-primary btn-sm" data-ng-click="createOutClick(userList,arrayValueKey)">
                                    保存
                                </button>
######如果 type=button 则回车不会提交表单；
 <button type="submit" class="btn btn-primary btn-sm" data-ng-click="createOutClick(userList,arrayValueKey)">
                                    保存
                                </button>
######如果 type=submit则回车会提交表单；

标签

#angularjs