码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-13 19:51:27      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:angularjs

我们项目里用到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框架中input按回车事件光标跳转到另一个input上

标签:angularjs

原文地址:http://blog.csdn.net/akemt/article/details/45695397

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!