How to implement the verification code input box component in vue

Recently when working on a project, I encountered such a requirement that I was required to enter a 4-digit or 6-digit SMS verification code. After the input is completed, put away the keyboard. Please refer to this article for the implementation steps

First look at the completed wave renderings

Requirements

Enter the 4-digit or 6-digit SMS verification code and close the keyboard after completing the input

Steps to implement

First step

Layout and typesetting

<p class="security-code-wrap">
 <label for="code">
  <ul class="security-code-container">
  <li class="field-wrap" v-for="(item, index) in number" :key="index">
   <i class="char-field">{{value[index] || placeholder}}</i>
  </li>
  </ul>
 </label>
 <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
   id="code" name="code" type="tel" :maxlength="number"
   autocorrect="off" autocomplete="off" autocapitalize="off">
</p>

Use the li element to simulate the display of the input box. There is no other purpose, just for semantics. Of course, you can also use any other element to simulate it, such as p.

The advantage of using the label tag is that it can be associated with the click event of the input. On the one hand, it achieves a semantic solution, and on the other hand, it saves us from using js to invoke the virtual keyboard.

Hide input box

.input-code {
 position: absolute;
 left: -9999px;
 top: -99999px;
 width: 0;
 height: 0;
 opacity: 0;
 overflow: visible;
 z-index: -1;
}

Position the real input box outside the visible area of ​​the screen. When the virtual keyboard is activated, the page will not be pushed up. Therefore, your verification code input component must be placed where the virtual keyboard cannot be blocked.

Second step

Processing verification code input

handleSubmit() {
 this.$emit('input', this.value)
},
handleInput(e) {
 this.$refs.input.value = this.value
 if (this.value.length >= this.number) {
  this.hideKeyboard()
 }
 this.handleSubmit()
}

When inputting, assign a value to the input box once to solve the problem of refocusing the input box on the Android side after it is out of focus. The input cursor will be positioned in front of the first digit. After assignment and focus, the cursor position will be displayed behind the last digit.

Step Three

Close the virtual keyboard after completing the input

hideKeyboard() {
 // 输入完成隐藏键盘
 document.activeElement.blur() // ios隐藏键盘
 this.$refs.input.blur() // android隐藏键盘
}

Complete component code

<!--四位验证码输入框组件-->
<template>
 <p class="security-code-wrap">
 <label for="code">
  <ul class="security-code-container">
  <li class="field-wrap" v-for="(item, index) in number" :key="index">
   <i class="char-field">{{value[index] || placeholder}}</i>
  </li>
  </ul>
 </label>
 <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
   id="code" name="code" type="tel" :maxlength="number"
   autocorrect="off" autocomplete="off" autocapitalize="off">
 </p>
</template>
<script>
 export default {
 name: &#39;SecurityCode&#39;,
 // component properties
 props: {
  number: {
  type: Number,
  default: 4
  },
  placeholder: {
  type: String,
  default: &#39;-&#39;
  }
 },
 // variables
 data() {
  return {
  value: &#39;&#39;
  }
 },
 methods: {
  hideKeyboard() {
  // 输入完成隐藏键盘
  document.activeElement.blur() // ios隐藏键盘
  this.$refs.input.blur() // android隐藏键盘
  },
  handleSubmit() {
  this.$emit(&#39;input&#39;, this.value)
  },
  handleInput(e) {
  this.$refs.input.value = this.value
  if (this.value.length >= this.number) {
   this.hideKeyboard()
  }
  this.handleSubmit()
  }
 }
 }
</script>
<style scoped lang="less">
 .security-code-wrap {
 overflow: hidden;
 }
 .security-code-container {
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 .field-wrap {
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background-color: #fff;
  margin: 2px;
  color: #000;
  .char-field {
  font-style: normal;
  }
 }
 }
 .input-code {
 position: absolute;
 left: -9999px;
 top: -99999px;
 width: 0;
 height: 0;
 opacity: 0;
 overflow: visible;
 z-index: -1;
 }
</style>

Component usage code

<security-code v-model="authCode"></security-code>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use React to encapsulate Portal reusable components

How to use the Node layer to implement multipart form file upload

How to implement seamless text scrolling using JS

How to implement finger sliding carousel on mobile in js

The above is the detailed content of How to implement the verification code input box component in vue. For more information, please follow other related articles on the PHP Chinese website!