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

浏览数：90 / 时间：2015年06月09日

我们项目里用到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则回车会提交表单；