Vue移动端 手机六位数密码框

手机六位数密码框

思路为创建六个只读密码框 设置样式 在外覆盖一个透明的密码框 然后设置输入事件 判断输入的长度来 在时间里为只读密码框输入值

直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <style>
    #phonePassword {
      position: relative;
      width: 500px;
      height: 500px;
      margin: auto;
    }
    #phonePassword input {
      width: 60px;
      height: 60px;
      border: 1px solid #000000;
      font-size: 50px;
      text-align: center;
    }
    #phonePassword .inputText {
      background-color: transparent;
      color: transparent;
      outline: none;
      width: 360px;
      position: absolute;
      top: 50px;
      z-index: 1;
    }
  </style>
  <body>
    <div id="app">
      <div id="phonePassword">
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:0"
        />
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:60px"
        />
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:120px"
        />
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:180px"
        />
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:240px"
        />
        <input
          type="password"
          maxlength="1"
          readonly
          style="position:absolute;top:50px;left:300px"
        />
        <input
          type="number"
          maxlength="6"
          class="inputText"
          v-model="myPassWord"
          @input="bb"
        />
        <button @click="aa">提交</button>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        myPassWord: ""
      },
      mounted() {},
      methods: {
        aa() {
          console.log(this.myPassWord);
        },
        bb() {
          if (this.myPassWord.length <= 6) {
            var passWord = document.querySelector("#phonePassword");
            for (let i = 0; i < 6; i++) {
              passWord.children[i].value = "";
            }
            for (let i = 0; i < this.myPassWord.length; i++) {
              passWord.children[i].value = "1";
            }
          } else if (this.myPassWord.length > 6) {
            this.myPassWord = this.myPassWord.slice(0, 6);
          }
        }
      }
    });
  </script>
</html>

Vue移动端 手机六位数密码框_第1张图片

你可能感兴趣的:(vue,js)