• vue自动获取input下一个光标,复制粘贴自动切割


    1.功能描述: 有四个input输入框,在一个input输入框中输满四个字符就自动聚焦到下一个input,复制粘贴类似于兑换码的 这种16位的ZPER-21UJ-PXPK-2Y13,粘贴后按照'-'切割自动分配到不同的input框中。

    2.代码部分:

    //HTML部分
    <div class="box-flex"> <div class="p"> <input v-model="code_1" v-on:input="inputFunc(1)" type="text" style="background-color: transparent; border: 0" /> <span></span> <input v-model="code_2" v-on:input="inputFunc(2)" id="code_2" type="text" style="background-color: transparent; border: 0" /> <span></span> <input v-model="code_3" v-on:input="inputFunc(3)" id="code_3" type="text" style="background-color: transparent; border: 0" /> <span></span> <input v-model="code_4" v-on:input="inputFunc(4)" id="code_4" type="text" style="background-color: transparent; border: 0" /> </div> <p class="commit" @click="commit">兑换</p> </div>
    //js部分
        inputFunc(code) {
          let number = code + 1;//下一个光标
          let coder = "";
          let str = "";
          str = this.code_1 + this.code_2 + this.code_3 + this.code_4;  //四个输入框的内容相加
          // 检索的字符串 ‘-’没有出现,则该方法返回 -1 没有就拼上去
          if(str.indexOf("-") == -1){
             str = this.code_1+'-'+ this.code_2+'-' + this.code_3+'-' + this.code_4;
          }
          // 如果是复制粘贴的就按照 ‘-’切割成数组
          let arr = str.split("-");

          // let arr = this.doString(str);
          console.log(arr);
          //  // 将切割的数组 按顺序分配进input
          this.doArr(arr);
          // 获取光标输入满四个即自动聚焦到下一个
          if (code == 1 && this.code_1.length >= 4) {
            this.code_1 = this.code_1.slice(0, 4);
            coder = document.getElementById("code_" + number);
            coder.focus();
          } else if (code == 2 && this.code_2.length >= 4) {
            this.code_2 = this.code_2.slice(0, 4);
            coder = document.getElementById("code_" + number);
            coder.focus();
          } else if (code == 3 && this.code_3.length >= 4) {
            this.code_3 = this.code_3.slice(0, 4);
            coder = document.getElementById("code_" + number);
            coder.focus();
          } else {
            this.code_4 = this.code_4.slice(0, 4);
            coder = document.getElementById("code_4");
            if (this.code_4.length >= 4) {
              coder.blur();
            }
          }
        },
    //切割数组
        doArr(arr) {
          // 将切割的数组 按顺序分配进input
          if (arr[0]) {
            this.code_1 = arr[0].slice(0, 4);
          }
          if (arr[1]) {
            this.code_2 = arr[1].slice(0, 4);
          }
          if (arr[2]) {
            this.code_3 = arr[2].slice(0, 4);
          }

          if (arr[3]) {
            this.code_4 = arr[3].slice(0, 4);
          }
        },
     
  • 相关阅读:
    FastAdmin Shopro商城安装
    MYSQL ERROR 10060
    宝塔命令
    kdevtmpfsi挖矿病毒处理
    VUE安装
    原生JS请求(AJAX)
    Bootstrap: 模态框组件
    Bootstrap: 缩略图组件
    Bootstrap: 栅格系统
    Bootstrap: 下拉菜单组件 & 分页组件
  • 原文地址:https://www.cnblogs.com/huangla/p/15469234.html
Copyright © 2020-2023  润新知