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

最新推荐文章于 2023-10-14 10:02:29 发布

奥皮

最新推荐文章于 2023-10-14 10:02:29 发布

阅读量2k

点赞数

分类专栏： vue js 文章标签：移动端 vue 密码框

本文链接：https://blog.csdn.net/axIsMyName/article/details/103349954

版权

js 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

手机六位数密码框

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

直接上代码

<!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/vue@2.6.0"></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>

奥皮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue移动端手机六位数密码框

手机六位数密码框思路为创建六个只读密码框设置样式在外覆盖一个透明的密码框然后设置输入事件判断输入的长度来在时间里为只读密码框输入值直接上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport...
复制链接

扫一扫