Teuta Koraqi Teuta Koraqi - 5 months ago 44
AngularJS Question

Navigate through list using angularjs or jquery

I'm creating a list, each list will have input, it means that it can be edited. But, I'm having an issue. Can I navigate through this list using arrow keys, and focus the target input?
Thank you in advance!



.content ul {
padding: 0;
}
.content ul li {
list-syle: none;
}

<div class="content">
<ul>
<li><textarea name="text" id=""></textarea></li>
<li><textarea name="text" id=""></textarea></li>
<li><textarea name="text" id=""></textarea></li>
</ul>
</div>




Answer

Create a directive that use the keyUp function to navigate through the textarea

<ul>
    <li><textarea name="text" id="" focus-next=""></textarea></li>
    <li><textarea name="text" id="" focus-next=""></textarea></li>
    <li><textarea name="text" id="" focus-next=""></textarea></li>
  </ul>

.directive('focusNext', function() {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
        elem.bind('keydown', function(e) {          
          var code = e.keyCode || e.which;
          if (code === 40) {
            e.preventDefault();
            if(elem.parent().next().find('textarea')[0])
                elem.parent().next().find('textarea')[0].focus();            
          }
        });
      }
    };
  });

checkout the fiddle https://jsfiddle.net/ebinmanuval/n04n8gbh/