HTMLフォーム入力にフォーカスを変更

私は自分のHTML入力フォームにキーを入力するように変更しようとしています。入力フィールドからsaveValue（）をトリガーし、Enterキーを押しながら次の入力フィールドにフォーカスする必要があります。私はからの指令で努力していますが、私の必要性に応じてどのように修正することができないのか分かりません。HTMLフォーム入力にフォーカスを変更

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をやりました。これは、あなたがこのディレクティブの代わりに、クリックからNG-変更をトリガしてくださいすることができます機能

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

出典

2016-12-13 12:19:54 jtsnr

を追加を行うと、保存するために、私はaddFieldAndSaveと呼ばれるメインコントローラに新しいメソッドを追加した仕事を得るために。私は変更しようとしましたが、.trigger（ 'change'）は変更イベントをトリガーしていません。どうすればチェックボックスにあるsaveValue（params）関数を起動できますか？ –

私は自分の答えを更新しました。希望が役立つ – jtsnr

HTMLフォーム入力にフォーカスを変更

答えて

関連する問題