0

In order for users to lon into my application, I send them a code (6 numbers) by SMS. When coming back to the application, I display a popup in order for them to input the said code. I would like to have 6 inputs (maxlength=1) for a better design. Here is the visual I would like to have :

enter image description here There is my (so-far) HTML template of the popup :

<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 for this template :

/*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;
    }

And the controller in charge of displaying the popup :

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

For the user to not hate me and actually log into the application, I would like to implement a kind of directive doing as follow : - Focus on first input when popup opens - Focus on next input everytime the previous is completed - Focus on previous input everytime the next one is deleted and backspace is pressed

Tip : I already tried puting a background-image into the input to simulate this behavior, but it didn't show up right on the phone.

I'm using Angular 1.5.3

Michael Maurel
  • 87
  • 2
  • 15

2 Answers2

0

You need add directive on each input that just trigger focus on next one

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

Example JSFiddle

Leguest
  • 2,097
  • 2
  • 17
  • 20
0

Excellent !

I used keyup instead on keypress in order to change focus on the previous sibling as weel, when the user taps the backspace.

I also used a popover in order to be able to personalize the template :

The view :

<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>

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

The controller

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

        }
    });

Thanks a lot for the help !

Michael Maurel
  • 87
  • 2
  • 15