输入框自动跳转光标

本文介绍了一个使用Vue.js实现的16位密码输入系统。该系统通过四个独立的输入框接收密码,每输入四位密码,焦点会自动跳转到下一个输入框。此外,当用户删除部分输入的密码时,焦点也会自动回到相应的输入框,确保了良好的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML:

<section>

      <p class="font_p">请刮开卡券密码,输入16位密码</p>
      <div class="input_div">
          <input type="text" v-model="card1" v-focus="focusStatus == 1" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" v-model="card2" v-focus="focusStatus == 2" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" v-model="card3" v-focus="focusStatus == 3" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" maxlength="4" v-model="card4" v-focus="focusStatus == 4" @focus="inputFocus" @keydown="inputKeyDown">
      </div>
      <div :class="classObj" @click="rechargeBtn" :disabled="activeDisable">兑换</div>
    </section>

VUE.JS:

watch:{
        card1:function (val,old){
          if(val.length == 4){
            this.focusStatus = 2;
          }else if(val.length == 0){
            this.focusStatus = 0;
          }
        },
        card2:function (val,old){
          if(val.length == 4){
            this.focusStatus = 3;
          }else if(val.length == 0){
            this.focusStatus = 1;
          }
        },
        card3:function (val,old){
          if(val.length == 4){
            this.focusStatus = 4;
          }else if(val.length == 0){
            this.focusStatus = 2;
          }
        },
        card4:function (val,old){
          if(val.length == 4){
            this.focusStatus = 0;
          }else if(val.length == 0){
            this.focusStatus = 3;
          }
        },

      },

methods:{
        inputKeyDown(event){
          if(event.keyCode == 8){
            if(this.activeDisable.length == 12){
              this.card3 = this.card3.substring(0,3);
              this.focusStatus = 3;
            }else if(this.activeDisable.length == 8){
              this.card2 = this.card2.substring(0,3);
              this.focusStatus = 2;
            }else if(this.activeDisable.length == 4){
              this.card1 = this.card1.substring(0,3);
              this.focusStatus = 1;
            }else{
              this.focusStatus = 0;
            }
          }
        },
        //按钮焦点设置
        inputFocus(){
          this.focusStatus = 0;
          if(this.activeDisable.length >= 12){
            this.focusStatus = 4;
          }else if(this.activeDisable.length >= 8){
            this.focusStatus = 3;
          }else if(this.activeDisable.length >= 4){
            this.focusStatus = 2;
          }else{
            this.focusStatus = 1;
          }

        },

},



### 控制输入框光标位置的方法 HTMLInputElement 的 `setSelectionRange` 方法可用于设置 `<input>` 或 `<textarea>` 元素中当前选中文本的起始和结束位置。此方法不仅可以用来选中特定范围的文字,还可以通过调整其参数来精确控制光标的位置。 以下是具体实现方式: #### 设置光标到指定位置 如果希望将光标移动到某个固定位置(比如第 5 个字符处),可以通过如下代码完成: ```javascript function setCaretPosition(inputElement, position) { if (inputElement.setSelectionRange) { // 检查浏览器支持情况 inputElement.focus(); // 确保输入框处于焦点状态 inputElement.setSelectionRange(position, position); // 起始和结束位置相同表示定位光标 } else if (inputElement.createTextRange) { // 针对旧版 IE 浏览器的支持 var range = inputElement.createTextRange(); range.collapse(true); range.moveEnd('character', position); range.moveStart('character', position); range.select(); } } ``` 调用上述函数时传入目标输入框以及期望的光标位置即可[^1]。 #### 将光标移至最后 当需要把光标放置于输入框内容的末尾时,可以动态计算字符串长度作为参数传递给 `setSelectionRange` 函数: ```javascript var inpObj = document.getElementById("yourInputId"); inpObj.focus(); if(inpObj.setSelectionRange){ inpObj.setSelectionRange(inpObj.value.length, inpObj.value.length); } else if (document.selection && inpObj.createTextRange){ var range = inpObj.createTextRange(); range.collapse(false); range.select(); } ``` 这里展示了跨浏览器兼容性的解决方案[^2]。 #### 实际应用案例 假设有一个场景,在用户点击按钮之后自动光标跳转输入框结尾,则可编写如下脚本并绑定事件处理程序: ```html <input type="text" id="exampleInput"> <button onclick="moveCursorToEnd()">Move Cursor</button> <script> function moveCursorToEnd(){ let elem = document.getElementById('exampleInput'); setTimeout(function(){ // 使用setTimeout确保DOM更新后再执行操作 if(elem.setSelectionRange){ elem.setSelectionRange(elem.value.length,elem.value.length); } },0); } </script> ``` 以上代码片段实现了点击按钮后让光标跳转到文本框末端的功能[^3]。 ### 注意事项 - 上述方法适用于单行 (`<input>`) 和多行 (`<textarea>`) 输入控件。 - 对于不支持现代标准的老版本IE浏览器提供了额外的fallback方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值