Home > Web Front-end > JS Tutorial > body text

How to implement the verification code input box component in vue

亚连
Release: 2018-06-20 16:32:02
Original
3695 people have browsed it

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>
Copy after login

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;
}
Copy after login

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(&#39;input&#39;, this.value)
},
handleInput(e) {
 this.$refs.input.value = this.value
 if (this.value.length >= this.number) {
  this.hideKeyboard()
 }
 this.handleSubmit()
}
Copy after login

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隐藏键盘
}
Copy after login

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>
Copy after login

Component usage code

<security-code v-model="authCode"></security-code>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!