Vue实现版本号输入、删除时光标自动移动到上、下一个输入框前端demo

这篇具有很好参考价值的文章主要介绍了Vue实现版本号输入、删除时光标自动移动到上、下一个输入框前端demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

首先声明,我平时的工作主要是后端JAVA开发,该demo为前端练习,记录一下劳动成果,希望对大家有所帮助,如果有写的不妥的地方,欢迎大家指正,一起学习、共同进步。

背景

手机验证码、银行卡输入密码等很多场景,在我们输入或者删除的时候,光标都会自动的定位到我们当前输入的输入框,模拟这一场景,我决定简单实现一下输入、删除版本号时,光标自动移动、定位。

假设:系统版本号分为主版本号、次版本号、修订号、构建号,一共这四个定义,同时每个字段最多只允许输入两位。最大的版本号则为99.99.99.99。

代码如下:

这四个版本号我决定使用四个输入框来模拟:

<template>
  <el-form ref="form" :model="params" label-width="93px">
    <el-form-item label="升级版本号" prop="version">
      <el-input v-model="params.major" @keyup.native="moveFocus($event,null,'minor')" style="width: 60px;margin-right: 5px;" ref="major" type="text" maxlength="2"/>
      <el-input v-model="params.minor" @keyup.native="moveFocus($event,'major','patch')" style="width: 60px;margin-right: 5px;" ref="minor" type="text" maxlength="2"/>
      <el-input v-model="params.patch" @keyup.native="moveFocus($event,'minor','build')" style="width: 60px;margin-right: 5px;" ref="patch" type="text" maxlength="2"/>
      <el-input v-model="params.build" @keyup.native="moveFocus($event,'patch',null)" style="width: 60px;margin-right: 5px;" ref="build" type="text" maxlength="2" />
    </el-form-item>
  </el-form>
</template>

 给这四个版本号初始化:

   data() {
    return {
     params: {
        version: undefined,
        //主版本号
        major: undefined,
        //次版本号
        minor: undefined,
        //修订号
        patch: undefined,
        //构建号
        build: undefined,
      }
    }
  }

使用@keyup事件来调用moveFocus方法,完成光标定位。(要使用@keyup.native,否则键盘事件不生效),在methods中添加moveFocus方法。

在这里我是通过判断当前输入的长度来触发光标移动。

methods: {
    moveFocus(event,prevInput,nextInput) {
      if (event.key === 'Backspace' && event.target.value.length === 0 && prevInput) {
        this.$refs[prevInput].focus();
      } else if (event.key !== 'Backspace' && event.target.value.length >= 2 && nextInput) {
        this.$refs[nextInput].focus();
      }
    }

读到这里别忘记点赞、收藏、关注哦,一键三连!!!文章来源地址https://www.toymoban.com/news/detail-833862.html

到了这里,关于Vue实现版本号输入、删除时光标自动移动到上、下一个输入框前端demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包