angularjs movem o foco para o próximo controle ao entrar

Qual é a melhor maneira, ao entrar em um formulário, o foco para ir para a próxima input, em vez de enviar o formulário com angularjs.

Eu tenho um formulário com muitos campos e os clientes são usados ​​para apertar enter para passar para a próxima input (vindo de aplicativos de desktop). O angularjs salva o formulário quando o usuário pressiona entrar. Eu gosto de mudar isso. É possível ?

Eu sugiro fazer uma diretiva personalizada. Algo assim. Eu não testei isso.

.directive('focus', function() { return { restrict: 'A', link: function($scope,elem,attrs) { elem.bind('keydown', function(e) { var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); elem.next().focus(); } }); } } }); 

Algo assim deveria funcionar. Você pode ter que tweek algo. Boa sorte.

Crie uma diretiva personalizada:

 .directive('nextOnEnter', function () { return { restrict: 'A', link: function ($scope, selem, attrs) { selem.bind('keydown', function (e) { var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); var pageElems = document.querySelectorAll('input, select, textarea'), elem = e.srcElement || e.target, focusNext = false, len = pageElems.length; for (var i = 0; i < len; i++) { var pe = pageElems[i]; if (focusNext) { if (pe.style.display !== 'none') { angular.element(pe).focus(); break; } } else if (pe === elem) { focusNext = true; } } } }); } } }) 

Esta é a diretiva que acabei (graças a Zack Argyle):


    
  angular.module('myApp').directive("nextFocus", nextFocus); /** Usage:    Upon pressing ENTER key the directive will switch focus to the next field id eg field2 The last field should not have next-focus directive to avoid focusing on non-existing element. Works for Web, iOS (Go button) & Android (Next button) browsers, **/ function nextFocus() { var directive = { restrict: 'A', link: function(scope, elem, attrs) { elem.bind('keydown', function(e) { var partsId = attrs.id.match(/field(\d{1})/); var currentId = parseInt(partsId[1]); var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); document.querySelector('#field' + (currentId + 1)).focus(); } }); } }; return directive; } 

Eu tentei esta solução. Como anunciado, precisou de alguns ajustes. Aqui está o que acabou funcionando para mim:

 .directive("focus", function () { return { restrict: "A", link: function ($scope, elem, attrs) { var focusables = $(":focusable"); elem.bind("keydown", function (e) { var code = e.keyCode || e.which; if (code === 13) { var current = focusables.index(this); var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0); next.focus(); e.preventDefault(); } }); } } 

Observe que, para obter o pseudo :focusable , você precisará referenciar o JQueryUI. (a última versão 1.11.4 funcionou para mim)

Esta é a diretiva que acabei (graças a Zack Argyle e Oleg):

app.directive (“nextFocus”, function () {

  /** Usage:    Upon pressing ENTER key the directive will switch focus to the next field id eg field2 The last field should not have next-focus directive to avoid focusing on non-existing element. Works for Web, iOS (Go button) & Android (Next button) browsers, **/ var directive = { restrict: 'A', link: function (scope, elem, attrs) { elem.bind('keydown', function (e) { var code = e.keyCode || e.which; if (code === 13) { try { if (attrs.tabindex != undefined) { var currentTabIndex = attrs.tabindex; var nextTabIndex = parseInt(attrs.tabindex) + 1; $("[tabindex=" + nextTabIndex + "]").focus(); } } catch (e) { } } }); } }; return directive; }); 

Com base na resposta de wolcy97, mas usando apenas angular

  /** Usage:    Upon pressing ENTER key the directive will switch focus to the next tabindex. The last field should not have next-focus directive to avoid focusing on non-existing element. Works for Web, iOS (Go button) & Android (Next button) browsers, **/ app.directive('nextFocus', [function() { return { restrict: 'A', link: function(scope, elem, attrs) { elem.bind('keydown', function(e) { var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); try { if (attrs.tabindex !== undefined) { var currentTabeIndex = attrs.tabindex; var nextTabIndex = parseInt(currentTabeIndex) + 1; var elems = document.querySelectorAll("[tabindex]"); for (var i = 0, len = elems.length; i < len; i++) { var el = angular.element(elems[i]); var idx = parseInt(el.attr('tabindex')); if (idx === nextTabIndex) { elems[i].focus(); break; } } } } catch (e) { console.log('Focus error: ' + e); } } }); } }; }]); 

JavaScript puro entra como TAB

 angular.module('app').directive('tabNext', function () { return { restrict: 'A', link: function (scope, elem) { elem.bind('keyup', function (e) { var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); var eIDX = -1; for (var i = 0; i < this.form.elements.length; i++) { if (elem.eq(this.form.elements[i])) { eIDX = i; break; } } if (eIDX === -1) { return; } var j = eIDX + 1; var theform = this.form; while (j !== eIDX) { if (j >= theform.elements.length){ j = 0; } if ((theform.elements[j].type !== "hidden") && (theform.elements[j].type !== "file") && (theform.elements[j].name !== theform.elements[eIDX].name) && (! theform.elements[j].disabled) && (theform.elements[j].tabIndex >= 0)) { if (theform.elements[j].type === "select-one") { theform.elements[j].focus(); } else if (theform.elements[j].type === "button") { theform.elements[j].focus(); } else { theform.elements[j].focus(); theform.elements[j].select(); } return; break; } j++; } } }); } }}); 
  
S No Stock Id Description Qty UOM Rate Amount Add Delete
{{$index + 1}} Add Delete
  $scope.moveFocus = function (nextId,prevId,downId,upId,index,event) { debugger; if (event.keyCode == 39) { nextId = nextId + index; $('#' + nextId).focus(); } else if(event.keyCode == 37) { prevId = prevId + index; $('#' + prevId).focus(); } else if(event.keyCode == 38) { upId = upId + (index - 1); $('#' + upId).focus(); } else if(event.keyCode == 40) { downId = downId + (index + 1); $('#' + downId).focus(); } else if(event.keyCode==13) { if (nextId == "desc") { nextId = "quantity" + index; $('#' + nextId).focus(); } else if(nextId == "uom") { nextId = "stkid" + (index + 1); $('#' + nextId).focus(); } } }; 

Em Enter, pressione para o próximo elemento do DOM, mas o elemento requer id para definir o foco

 starter.directive('focustonext', function () { return { restrict: 'A', link: function ($scope, selem, attrs) { selem.bind('keydown', function (e) { var code = e.keyCode || e.which; if (code === 13) { e.preventDefault(); var pageElems = document.querySelectorAll('input, select, textarea'), elem = e.srcElement || e.target, focusNext = false, len = pageElems.length; for (var i = 0; i < len; i++) { var pe = pageElems[i]; if (focusNext) { if (pe.style.display !== 'none') { document.getElementById(pe.id).focus(); break; } } else if (pe === elem) { focusNext = true; } } } }); } } }); 

Obrigado a todos ..