js imitates Alipay to fill in the payment password effect to achieve multi-box password input_javascript skills

I don’t know how to describe the title. Let’s take a look at the screenshot first. The general effect is to enter a password in a box.

The initial implementation idea is that a small box is an input of type password. Each time a digit is entered, it automatically jumps to the next digit. When a digit is deleted, it automatically jumps to the previous digit. It is OK on Android. It is very It is smooth and has no bugs, but on iOS the keyboard will be opened and closed frequently, which greatly affects the user experience. The reason is probably that each input will be continuously focused and blurred. Each time focus will bring up the keyboard, and blur will close the keyboard, so... this solution will definitely not work.

PM has to achieve this effect, there is no way~ But if you can’t help it, a bad user experience will make you speechless, who wants us to be the front-end~ If you can’t help it, just find a solution.

Since many of the problems are caused by frequent focus and blur, and it must be a password box, why not use an input box to input it, and use other methods to simulate the small box, and let’s get started.

The following is the implemented style:

.pwd-box{
width:310px;
padding-left: 1px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 45px;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
opacity: 0;
z-index: 1;
letter-spacing: 35px;
}
.fake-box input{
width: 44px;
height: 48px;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
}
.fake-box input:nth-last-child(1){
border:none;
}

.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~
left:-1000px;
top: -100px;
}

var $input = $(".fake-box input");
      $("#pwd-input").on("input", function() {
        var pwd = $(this).val().trim();
        for (var i = 0, len = pwd.length; i < len; i++) {
          $input.eq("" + i + "").val(pwd[i]);
        }
        $input.each(function() {
          var index = $(this).index();
          if (index >= len) {
            $(this).val("");
          }
        });
        if (len == 6) {
          self.sendPackage(pwd);//发送密码
        }
      });

The general idea is to dynamically monitor the input of the real password box and modify the content of the password box in the small box.

In fact, it is not difficult to achieve the effect. The key is to solve the problem of compatibility. When the effect is completed, IOS will have a flashing cursor, but Android does not. Then find a series of methods to hide the cursor, such as setting text- when focusing. indent, color settings, transparent, etc., but all to no avail. Later I found out that Taobao has a way to throw the password box aside when focusing, because the outer layer has overflow hidden, which perfectly solves the problem.

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.