Question

为了让用户进入我的应用程序，我通过短信向他们发送代码（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);
              }
            }
          ]
    });

为了让用户不讨厌我并实际登录到应用程序，我想实现一种指令，如下所示： - 当弹出窗口打开时，专注于第一个输入 - 每次完成前一个时关注下一个输入 - 每次删除下一个输入并按下退格键时，请关注先前的输入

提示：我已经尝试将背景图像放入输入中来模拟这种行为，但它并没有显示在手机上。

我正在使用Angular 1.5.3

Answer 1

您需要在每个输入上添加指令，只需触发下一个

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

Example JSFiddle

Answer 2

太棒了！

我在 keypress 上使用了 keyup ，以便在用户点击退格键时将焦点更改为上一个兄弟。

我还使用了一个popover来个性化模板：

观点：

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

        }
    });

非常感谢您的帮助！

角度/离子：完成后改变输入焦点

2 个答案: