Sử dụng phím enter làm tab chỉ sử dụng angularjs và jqlite

Tôi đã xem xét nhiều luồng và thử nhiều giải pháp khác nhau. Khá thẳng thắn Tôi nghĩ mình đang mất trí.Sử dụng phím enter làm tab chỉ sử dụng angularjs và jqlite

Tôi có ng-lặp lại với đầu vào. Tất cả những gì cần phải xảy ra là khi người dùng nhấn enter, nó sẽ chuyển trọng tâm sang đầu vào tiếp theo, về cơ bản mô phỏng chức năng phím tab.

Mã (không đầy đủ): 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       
      } 
     }); 
    }; 
});

Dưới đây là một liên kết đến fiddle: fiddle

Nguồn

2014-10-09 avn

gì giải pháp mà bạn đã cố gắng chưa? – AlexFoxGill

Tôi đã gỡ bỏ mã từ fiddle, vì vậy tôi không có một tham chiếu đến chúng nữa, nhưng đây là những gì tôi đang cố gắng đạt được: [link] (http://stackoverflow.com/questions/23430830/keyboard -navigation-in-angularjs-table) – avn

Ok, vì vậy tôi tìm ra. Dù sao thì cũng không khó. Chỉ cần bắt kịp trong toàn bộ "không nghĩ rằng jQuery trong khi sử dụng Angular" suy nghĩ.

Dưới đây là chỉ thị mà tôi thực hiện:

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

Dưới đây là liên kết để fiddle làm việc: enter-as-tab

Nguồn

2014-10-10 09:34:45 avn

Bắt đầu từ @ AVN của giải pháp tôi đã thực hiện một số thay đổi để tìm đệ quy và tập trung vào tiếp theo văn bản đầu vào hoặc số đầu vào, nhưng chỉ khi giá trị hợp lệ hoặc gửi biểu mẫu. Được thiết kế cho ionic hình thức nhưng có thể được điều chỉnh cho bất kỳ hình thức góc:

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

     }); 
    } 
    }; 
});

Nguồn

2016-09-27 00:38:05 manzapanza

Sử dụng phím enter làm tab chỉ sử dụng angularjs và jqlite

Trả lời

Các vấn đề liên quan