Angularjs -按下下一个输入

Angularjs - next input on keypress

本文关键字：下一个 输入 Angularjs      更新时间：2023-09-26

我一直在尝试实现一个指令，每次用户点击键盘。

我有四个不同的输入，每个输入接收一个字符，用户应该填写下一个表单

我写了一个指令，但它不工作

这是我的代码:

JS: 

var app = angular.module('app', []);
app.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {
      elem.bind('keydown', function(e) {
         elem.next().focus();
      });
    }
  }
})
HTML: 

<div ng-app="app">
    <form>
        <input  focus type="text"   /> 
        <input  focus type="text"   /> 
        <input focus type="text"   />
    </form>
</div>

Jsfiddle: http://jsfiddle.net/Y2XLA/109/

非常类似的问题:angularjs在输入

时将焦点移到下一个控件

可能是一些简单的东西，但我没有得到正确的

非常感谢!

解决方案很简单，只需在.next()后面添加一个[0]:

    elem.bind('keydown', function (e) {
        elem.next()[0].focus();
    });

但是您可能想使用keyup而不是keydown，因此您在切换到下一个输入字段之前将值输入到旧的输入字段。更新小提琴:http://jsfiddle.net/Y2XLA/110/

您还应该为elem.next()不是输入字段的情况添加一些处理

创建定制指令:

.directive('nextOnKeypress', function () {
    return {
        restrict: 'A',
        link: function ($scope, selem, attrs) {
            selem.bind('keypress', function (e) {
                e.preventDefault();
                var pageElems = document.querySelectorAll('input, select, textarea'),
                    elem = e.srcElement
                    focusNext = false,
                    len = pageElems.length;
                for (var i = 0; i < len; i++) {
                    var pe = pageElems[i];
                    if (focusNext) {
                        if (pe.style.display !== 'none') {
                            pe.focus();
                            break;
                        }
                    } else if (pe === e.srcElement) {
                        focusNext = true;
                    }
                }
            });
        }
    }
})
相关文章：