關於angularjs架構中input按斷行符號事件游標跳轉到另一個input上
我們項目裡用到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頁面:
######值得注意的是: 按下斷行符號 與提交表單按鈕;當輸入框是多個時。儲存######如果 type=button 則斷行符號不會提交表單;儲存######如果 type=submit則斷行符號會提交表單;