I am currently working on adjusting the functionality of my HTML input form to change focus upon pressing the enter key. I need to trigger the saveValue() function from the input field when the enter key is pressed and then move the focus to the next input field. I have been exploring a directive from Stack Overflow that deals with moving focus in AngularJS, but I am unsure how to customize it to fit my specific requirements.
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;
}
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>