Html form Change focus on enter

Я пытаюсь изменить фокус на ввод ключа в моей форме ввода html. Мне нужно вызвать saveValue() из поля ввода, нажимая enter и сфокусируйтесь на следующее поле ввода. Я пытаюсь с директивой от angularjs move focus to next control on enter, но не знаю, как я могу изменить в соответствии с моей потребностью.Html form Change focus 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>

источник

2016-12-13 Suraz Khanal

Проблема у вас будет то, что при выполнении обработчика директивы KeyDown новый вход не будет существовать на странице еще. Он будет создан позже. Я предлагаю вам использовать $ интервал держать проверку, когда вход был добавлен, а затем назначить фокус:

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

Это довольно сложное, поэтому я проделал plunker. Для того, чтобы получить эту работу, я добавил новый метод в главном контроллере называется addFieldAndSave сделать надстройку и сохранить функции

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

источник

2016-12-13 12:19:54 jtsnr

пожалуйста, вы можете вызвать нг-переход от этой директивы вместо мыши. Я попытался изменить, но .trigger ('change') не вызывает событие изменения. Как я могу вызвать следующую функцию saveValue (params), которая находится на флажке. –

Я обновил свой ответ. надеюсь, это поможет – jtsnr

Html form Change focus on enter

ответ

Смежные вопросы