输入框自动跳转光标

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;
          }

        },

},



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,针对短信小区光标功能,以下是一些测试用例: 1. 测试光标能否正常移动到短信内容的任意位置。 2. 测试在输入短信内容时,光标的闪烁是否正常。 3. 测试在光标停在某个位置时,能否正常输入文本。 4. 测试在光标停在某个位置时,删除键是否能够正常删除文本。 5. 测试在光标停在某个位置时,退格键是否能够正常删除文本。 6. 测试在光标停在某个位置时,复制和粘贴功能是否正常。 7. 测试在输入过程中,光标是否会动或者消失。 8. 测试在输入过程中,光标的大小和颜色是否符合预期。 9. 测试在输入过程中,光标的位置是否稳定不变。 10. 测试在输入过程中,光标和键盘的响应速度是否正常。 希望对你有所帮助! ### 回答2: 短信小区光标功能是指在发送或编辑短信时,能够实现光标的移动和定位,方便用户进行文字的修改和编辑。为了对这一功能进行测试,我们需要设计相应的测试用例进行验证。 1. 光标移动测试 a. 向左移动光标:在输入框中输入一段文字,按下左方向键,验证光标能否向左移动一个字符的位置。 b. 向右移动光标:在输入框中输入一段文字,按下右方向键,验证光标能否向右移动一个字符的位置。 c. 到起始位置:在输入框中输入一段文字,按下Home键,验证光标能否到文本的起始位置。 d. 到末尾位置:在输入框中输入一段文字,按下End键,验证光标能否到文本的末尾位置。 2. 光标定位测试 a. 移动到指定位置:在输入框中输入一段文字,点击文本中的某个位置,验证光标是否能够准确定位到该位置。 b. 按下Ctrl+左键:在输入框中输入一段文字,按下Ctrl+左键组合键,验证光标能否向左一个单词的位置。 c. 按下Ctrl+右键:在输入框中输入一段文字,按下Ctrl+右键组合键,验证光标能否向右一个单词的位置。 3. 文本编辑测试 a. 插入文本:在输入框中输入一段文字,将光标定位到指定位置,输入新的文本后,验证该文本是否能够正确插入到光标所在位置。 b. 删除文本:在输入框中输入一段文字,选择一部分文本,按下Delete键,验证被选择的文本是否被正确删除。 c. 复制和粘贴:在输入框中输入一段文字,选择一部分文本,按下Ctrl+C进行复制,然后将光标移到其他位置,按下Ctrl+V进行粘贴,验证被复制的文本是否能够正确粘贴到光标所在位置。 通过上述的测试用例,我们能够确保短信小区光标功能的正常运行,用户可以方便地对短信进行编辑和修改操作,提高了用户的使用体验。 ### 回答3: 短信小区光标功能是指在手机短信中,通过光标控制的功能,用于在文字编辑模式下定位光标的位置。以下是对短信小区光标功能的一些测试用例。 1. 光标定位测试:测试确保通过光标功能能够准确地将光标定位到指定的位置。包括将光标定位到文字的起始位置、中间位置和末尾位置等。 2. 光标移动测试:测试通过光标功能能够准确地将光标移动到相邻的位置。包括将光标向前或向后移动一个字符、一个单词或一行等。 3. 光标选中测试:测试通过光标功能能够准确地选中指定的文字。包括选中一个字符、一个单词或一段文字等。 4. 光标插入测试:测试通过光标功能能够准确地在指定位置插入文字。包括在文字的起始位置、中间位置和末尾位置插入文字等。 5. 光标删除测试:测试通过光标功能能够准确地删除指定位置的文字。包括删除一个字符、一个单词或一段文字等。 6. 长文本测试:测试通过光标功能在长篇文字中的表现。包括在长度超过屏幕的文字中移动光标、选中文字、插入和删除文字等操作。 7. 错误处理测试:测试通过输入非法命令或参数时,光标功能是否能够正确地处理错误并给出相应的提示或提示用户重新输入。 8. 性能测试:测试通过大量文字的操作,如输入、移动和删除等是否能够保持流畅的响应速度,不出现卡顿或操作延迟的情况。 通过以上测试用例,可以全面测试短信小区光标功能的各项操作和性能,确保其正常运行并满足用户期望。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值