Question

我一直在尝试实施一个每次用户点击键盘时都会观察的指令。

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

我为此写了一个指令，但它不起作用

这是我的代码：

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 move focus to next control on enter

可能这很简单，但我没有把它弄好

非常感谢！

Answer 1

解决方案非常简单，只需在[0]之后添加.next()：

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

但是你想要使用keyup而不是keydown，所以你在切换到下一个之前输入旧输入字段的值。更新了小提琴：http://jsfiddle.net/Y2XLA/110/

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

Answer 2

创建自定义指令：

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

Angularjs - 按键上的下一个输入

2 个答案: