angularjs将焦点移动到下一个控制输入

Question

什么是最好的方式,当在表单中输入时,焦点转到下一个输入而不是使用angularjs提交表单.

我有一个包含很多字段的表单,客户习惯按Enter键移动到下一个输入(从桌面应用程序转移).当用户点击进入时,angularjs会保存表单.我想改变这个.可能吗 ？

Answer 1

我建议制作一个自定义指令.像这样的东西.我没有测试过这个.

.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.bind('keydown', function(e) {
        var code = e.keyCode || e.which;
        if (code === 13) {
          e.preventDefault();
          elem.next().focus();
        }
      });
    }
  }
});

这样的事情应该有效.你可能需要调整一些东西.祝好运.

Answer 2

创建自定义指令:

.directive('nextOnEnter', function () {
    return {
        restrict: 'A',
        link: function ($scope, selem, attrs) {
            selem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    var pageElems = document.querySelectorAll('input, select, textarea'),
                        elem = e.srcElement || e.target,
                        focusNext = false,
                        len = pageElems.length;
                    for (var i = 0; i < len; i++) {
                        var pe = pageElems[i];
                        if (focusNext) {
                            if (pe.style.display !== 'none') {
                                angular.element(pe).focus();
                                break;
                            }
                        } else if (pe === elem) {
                            focusNext = true;
                        }
                    }
                }
            });
        }
    }
})