Html form Change focus on enter

Question

I am trying to change the focus on enter key on my html input form. I have to trigger saveValue() from input field while pressing enter and focus to next input field. I am trying with the directive from angularjs move focus to next control on enter but dont know how can i modify according to my need.

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>

jtsnr · Accepted Answer · 2016-12-13T21:21:20.723

The problem you will have is that when the directive keydown handler runs the new input will not exist on the page yet. It will get created later on. I suggest you use a $interval to keep checking when the input has been added and then assign the focus:

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

This is quite complex so I've done a plunker. To get this to work I added a new method in the main controller called addFieldAndSave to do the add and save functions

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

can you please trigger the ng-change from this directive instead of click. I have tried to change, but .trigger('change ') is not triggering the change event. How can i trigger the next function saveValue(params) which is on the checkbox. — Suraz Khanal, Dec 13 '16 at 16:01

Html form Change focus on enter

1 Answers1