Angular/Ionic：完成後更改輸入焦點

Question

爲了使用戶能夠使用我的應用程序，我通過SMS向他們發送了一個代碼（6個數字）。 回到應用程序時，我會顯示一個彈出窗口，以便他們輸入上述代碼。 我希望有6個輸入（maxlength = 1）以獲得更好的設計。這裏是視覺我想有：

有彈出我的（所以遠）HTML模板：

<ion-content class="content-activation-code"> 
<div class="activation-code-list"> 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c1" ng-focus="code.c1===''"> 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c2"> 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c3" > 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c4" > 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c5" > 
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c6" > 
</div> 

CSS這個模板：

/*Popup code*/ 
.content-activation-code{ 
    margin-top:55px; 
} 
    .activation-code-list{ 
     text-align:center; 
    } 
    .content-activation-code .activation-input-code{ 
     width:20px; 
     border:1px solid grey; 
     margin:2px; 
     border-radius:10px; 
     text-align:center; 
     display:inline; 
    } 

而負責顯示彈出窗口的控制器：

$scope.code = {c1:"",c2:"",c3:"",c4:"",c5:"",c6:""}; 

    $ionicPopup.show({ 
     templateUrl: "templates/activation_code.html", 
     title: 'Pour activer votre compte', 
     subTitle: 'Entrez le code envoyé au XXXX', 
     scope: $scope, 
     buttons: [ 
      { text: 'Annuler' }, 
      { 
       text: 'Activer', 
       type: 'button-positive', 
       onTap: function(event) { 
       console.log($scope.code); 
       } 
      } 
      ] 
    }); 

對於用戶不恨我，實際上登錄到應用程序，我想實現一種指令做如下的： - 關注第一輸入時，彈出打開 - 專注於下一個輸入每次以前是完成 - 聚焦以前每次輸入下一個被刪除，退格鍵被按下

提示： 我已經嘗試過puting背景圖像到輸入來模擬這種行爲，但它並沒有在右側顯示電話。

我採用了棱角分明1.5.3

Answer 1

你需要在每個輸入，只是觸發專注於下一個

elem.on(keypress, function(e) { 
    e.target.nextElementSibling.focus().select(); 
}) 

Example的jsfiddle

Answer 2

優秀添加指令！

予以改變上的前一個同級作爲WEEL焦點，當用戶輕敲退格用於KEYUP上代替按鍵。

我也使用了酥料餅，以便能夠以個性化的模板：

的視圖：

<ion-view class="activation-popup-bg"> 
    <div class="activation-popup-code"> 
     <div class="activation_titre popup_titre">Pour activer votre compte</div> 
     <div class="activation_soustitre popup_soustitre">Entrez le code envoyé au {{activationCtrl.portableFormate}}</div> 

     <div class="code-liste"> 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c1" > 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c2" > 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c3" > 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c4" > 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c5" > 
      <input type="text" class="code-input" maxlength="1" ng-model="activationCtrl.c6" > 
     </div> 
     <button type="submit" class="button button-bac button-popup-code">VALIDER</button> 
    </div> 
</ion-view> 

的CSS

/*Popup code*/ 
.activation-popup-bg{ 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.5); 
} 
.activation-popup-code{ 
    width:90%; 
    background-color:white; 
    margin:auto; 
    margin-top:50%; 
    text-align:center; 
} 
    .activation-popup-code .popup_titre{ 
     width:75%; 
     margin-right:auto; 
     margin-left:auto; 
     padding-top:5%; 
     color:#353535; 
     font-family:quicksandLight; 
    } 
    .activation-popup-code .popup_soustitre{ 
     color:#353535; 
     font-family:quicksandMedium; 
    } 
    .activation-popup-code .code-liste{ 
     text-align:center; 
     padding-top:5% 
    } 
     .activation-popup-code .code-liste .code-input{ 
      display:inline; 
      height:50px; 
      width:30px; 
      border-radius:15px; 
      margin:2px; 
      border:1px solid grey; 

      font-family:quicksandRegular; 
      text-align:center; 
      font-size:30px; 
     } 

    .activation-popup-code .button-popup-code{ 
     width:90%; 
     margin-bottom:10%; 
     margin-top:5%; 
     background-color:#707173; 
     font-family:quicksandBold; 
     color:white; 
    } 

控制器

$scope.popover = $ionicPopover 
    .fromTemplateUrl("templates/activation_code.html", {scope: $scope}) 
    .then(function(popover) { 
     $scope.popover = popover; 
     $scope.popover.show(); 

     //Liaison des input entre eux 
     var tmpInputCode = document.querySelectorAll('.code-input'); 
     for(var i in tmpInputCode) { 
      try{tmpInputCode[i].addEventListener('keyup', switchToNext);}catch(e){}; 
     } 

     function switchToNext(e){ 
      switch(e.keyCode){ 
       case 8://Backspace 
        try{e.target.previousElementSibling.focus();}catch(e){}; 
        break; 
       default://Autre touche 
        try{e.target.nextElementSibling.focus();}catch(e){}; 
        break; 
      } 

     } 
    }); 

非常感謝您的幫助！