각도 키와 jqlite 만 사용하여 엔터 키를 탭으로 사용

나는 여러 스레드를 조사하고 방대한 솔루션을 시도했습니다. 솔직히 나는 내 마음을 잃어 가고 있다고 생각합니다.각도 키와 jqlite 만 사용하여 엔터 키를 탭으로 사용

입력이있는 ng-repeat가 있습니다. 사용자가 엔터를 누르면 기본적으로 탭 키 기능을 시뮬레이션하여 다음 입력으로 포커스를 이동해야한다는 점이 모두 필요합니다. (불완전한)

코드 : 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       
      } 
     }); 
    }; 
});

은 바이올린에 대한 링크이다 fiddle

출처

2014-10-09 avn

이미 시도한 솔루션은 무엇입니까? – AlexFoxGill

나는 바이올린에서 코드를 제거 했으므로 더 이상이 코드에 대한 참조가 없지만 이것이 근본적으로 내가 달성하려고하는 것입니다. [link] (http://stackoverflow.com/questions/23430830/keyboard) -navigation-in-angularjs-table) – avn

좋아, 그래서 그것을 알아 내었다. 결국 그 일이 어렵지 않았습니다. 그냥 "Angular"사고 방식을 사용하는 동안 jQuery를 생각하지 마십시오. 나는 몇 가지 변화가 반복적으로 찾아 다음에 초점을 만든 enter-as-tab

출처

2014-10-10 09:34:45 avn

@ AVN의 솔루션에 시작 : 여기

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(); 
      } 
     }); 
    }; 
});

이 작업 바이올린에 대한 링크입니다 : 여기

내가 구현 지침입니다 입력 된 텍스트 또는 입력 번호. 값이 유효한 경우에만 또는 양식을 전송하십시오. ionic 양식으로 설계되었지만 각도 모양에 맞게 조정할 수 있습니다.

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(); 
      } 
     } 

     }); 
    } 
    }; 
});

출처

2016-09-27 00:38:05 manzapanza

각도 키와 jqlite 만 사용하여 엔터 키를 탭으로 사용

답변

관련 문제