Używanie klawisza Enter jako tabulatora przy użyciu tylko angularjs i jqlite

Przeglądałem wiele wątków i próbowałem wielu różnych rozwiązań. Szczerze mówiąc, myślę, że tracę rozum.Używanie klawisza Enter jako tabulatora przy użyciu tylko angularjs i jqlite

Mam powtórzenie ng z wejściami. Wszystko, co musi się wydarzyć, to to, że gdy użytkownik naciśnie przycisk enter, powinien przesunąć fokus na następne wejście, zasadniczo symulując funkcjonalność klawisza tab.

Kod (niekompletna): HTML:

<body ng-app="ap" ng-controller="con"> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    <tr ng-repeat='person in persons'> 
     <td> 
      <input type='text' 
       name="personName" 
       ng-model="person.name" 
      /> 
     </td> 
     <td> 
      <input type='number' 
       name="personName" 
       ng-model="person.age" 
       enter-as-tab 
      /> 
     </td> 
    </tr> 
</table>

JS:

var app = angular.module("ap", []); 

app.controller("con", function ($scope) { 

    $scope.persons = [ 
     { name: 'Susan', age: 1 }, 
     { name: 'Peter', age: 1 }, 
     { name: 'Jack', age: 2 } 
    ]; 
}); 

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       // Go to next age input       
      } 
     }); 
    }; 
});

Tu jest link do skrzypiec: fiddle

Źródło

2014-10-09 avn

Jakie rozwiązania już wypróbowałeś? – AlexFoxGill

Usunąłem kod z skrzypiec, więc nie mam już do nich odniesienia, ale to jest zasadniczo to, co próbuję osiągnąć: [link] (http://stackoverflow.com/questions/23430830/keyboard -navigation-in-angularjs-table) – avn

Ok, więc ja domyśliłam się. Wcale nie było to jednak trudne. Właśnie złapałem się w cały "nie myślę jQuery podczas używania Angular" sposób myślenia.

Oto dyrektywa że wdrożone:

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       var elementToFocus = element.next('tr').find('input')[1]; 
       if(angular.isDefined(elementToFocus)) 
        elementToFocus.focus(); 
      } 
     }); 
    }; 
});

Oto link do skrzypiec robocza: enter-as-tab

Źródło

2014-10-10 09:34:45 avn

Zaczynając od użytkownika @ AVN rozwiązania Zrobiłem kilka zmian, aby znaleźć rekurencyjnie i skupić się na następnym tekst wejściowy lub numer wejściowy, ale tylko wtedy, gdy wartość jest ważna lub wysłać formularz. Został zaprojektowany dla formularzy ionic, ale może być dostosowany do dowolnej formy kątowej:

app.directive('enterAsTab', function() { 
    return { 
    restrict: 'A', 
    require: '^ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     element.bind("keydown keypress", function (event) { 

     function isKeyEnterAndValid(){ 
      return event.which === 13 && ctrl.$valid; 
     } 

     function nextItem(div, tag){ 
      var next = div.next(tag); 
      if (!next) return nextItem(div, 'label'); 
      return next; 
     } 

     function isTypeTextOrNumber(input){ 
      return ['text', 'number'].indexOf(input.attr('type')) === -1; 
     } 

     function findInput(div){ 
      var next = nextItem(div, 'div'); 
      if (!next) return; 
      var input = next.find('input'); 
      if (!input || isTypeTextOrNumber(input)){ 
      return findInput(next); 
      } 
      return input[0]; 
     } 

     if(isKeyEnterAndValid()) { 
      var nextInput = findInput(element.parent()); 
      if(angular.isDefined(nextInput)){ 
      event.preventDefault(); 
      nextInput.focus(); 
      } 
     } 

     }); 
    } 
    }; 
});

Źródło

2016-09-27 00:38:05 manzapanza

Używanie klawisza Enter jako tabulatora przy użyciu tylko angularjs i jqlite

Odpowiedz

Powiązane problemy