Question

我正在尝试将重点放在我的html输入表单上的输入键上。我必须从输入字段触发saveValue（），同时按Enter键并将焦点转移到下一个输入字段。我正在尝试angularjs move focus to next control on enter的指令，但不知道如何根据我的需要进行修改。

angular.module('ionicApp', ['ionic'])
  .controller('appCtrl', function($scope) {
    $scope.inputs = [{
      value: ''
    }];
    var checkedValues = [];

    $scope.addField = function(index) {
      console.log(index);
      var name = {
        'value': ''
      };
      if ($scope.inputs.length <= index + 1 && $scope.inputs.length < 10) {
        $scope.inputs.splice(index + 1, 0, name);
      }
    }
    $scope.saveValue = function(ticked, item, index) {
      console.log(index);

      if (ticked) {
        if (index >= 0) {
          $scope.showButton = true;
        }
        //if(index<=9) checkedValues.splice(index,0,item);
        checkedValues[index] = item;
        console.log(checkedValues);
      } else {
        var indexs = checkedValues.indexOf(item);
        if (indexs > -1) {
          checkedValues.splice(indexs, 1);
        }

        console.log(checkedValues);
      }

    }
  })

.small-input .item-checkbox .checkbox {
  position: absolute;
  top: 50%;
  right: 8px;
  left: 5px!important;
  z-index: 3;
  margin-top: -20px!important;
  transform: scale(1);
}
.checkbox-royal input:before,
.checkbox-royal .checkbox-icon:before {
  border-color: #000;
  background-color: #387ef5;
}
.checkbox-royal input:checked:before,
.checkbox-royal input:checked + .checkbox-icon:before {
  background: #099AD1;
  border-color: #387ef5;
}

<html>

<head>
  <link href="http://code.ionicframework.com/1.3.2/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>

</head>

<body ng-app="ionicApp" ng-controller="appCtrl">
  <form id="valueForm" ng-submit="submitValues()">
    <div class="small-input list padding" style="padding-top:4px;">
      <div ng-repeat="item in inputs  track by $index">
        <label class="item item-input">
          <input type="text" placeholder="" ng-model="item.value" ng-disabled="item.ticked">
          <ion-checkbox ng-click="addField($index)" ng-change="saveValue(item.ticked,item.value,$index)" ng-model="item.ticked" ng-disabled="!item.value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
        </label>
      </div>
      <button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style=""><i class="ion-ios-arrow-forward"></i>
      </button>
    </div>

  </form>
</body>
</head>

Answer 1

您将遇到的问题是，当指令keydown处理程序运行时，新的输入将不会存在于页面上。它将在稍后创建。我建议您使用$ interval来检查添加输入的时间，然后指定焦点：

elem.bind('keydown', function(e) {
  var code = e.keyCode || e.which;
  if (code === 13) {
    e.preventDefault();
    scope.addFieldAndSave(index);

    // Create interval to check when the new input has been added
    scope.interval = $interval(function() {
      var e = $('input[type=text]');
      if (e.length === scope.inputs.length) {

        scope.cancel();
        // Set focus to the last element enabled input
        $('input[type=text]:not(:disabled):last').focus();
      }
    }, 10);
  }
});

这很复杂，所以我做了一个傻瓜。为了实现这一点，我在主控制器中添加了一个名为addFieldAndSave的新方法来执行添加和保存功能

https://plnkr.co/edit/2NXQB7N7bVxUVQk7PLsx?p=preview

Html表单更改焦点在输入

1 个答案: