The effect of “Input verification code” of APP is realized on the Web side

The effect of “Input verification code” of APP is realized on the Web side

Github.com/useryangtao…

The cause of(Just for talking too much on wechat…)

A few days ago, I had a chat with a buddy about how to achieve the effect of verification code input of Uber and Didi.

At the beginning of design

Plan 1:

Implement an input and cover the two lines with a white background between them. Use letter-spacing to control word spacing.

However, it is difficult to control the digital spacing, and the effect is not good.

Scheme 2:

Use the label label as a box to display the verification code,

And then each label for attribute points to the same input with id vcode,

To trigger the input focus, hide the input transparency style,

This allows clicking on label to trigger the input focus and invoke the keyboard.

implementation(Later ~ finally realized in tears… * *)

Finally, we tried to choose plan 2

Implementation effect

Feel cursor effect is very interesting, then useanimateWe had the

structure

<div class="v-code">
<input type="tel" id="vcode" />

<label for="vcode"></label> <label... * 5(depending on the length of the verification code 4 or 6) </div>Copy the code

style

Omitted here… See the cursor – vcode

logic

The next step is to implement the label and input value corresponding, here depends on vUE simple implementation of the idea

(Vue is not hot, hahaha ~ 😂 😂 😂)

HTML binding

<div id="app">
    <div class="v-code">
      <input
      ref="vcode"
      id="vcode"
      type="tel"
      maxlength="6"
      v-model="code"
      @focus="focused = true"
      @blur="focused = false"
      :disabled="telDisabled">

      <label
        for="vcode"
        class="line"
        v-for="item,index in codeLength"
        :class="{'animated': focused && cursorIndex === index}"
        v-text="codeArr[index]"
        >
      </label>
    </div>
</div>
Copy the code

javascript

var app = new Vue({
    el: '#app',
    data: {
      code: ' ', // input value codeLength: 6, // verification codeLength telDisabled:false// check whether focused is completed:false// Make the input focus, determine where the cursor is displayed}, computed: {codeArr() {// Delimit the input value array [1, 2, 3]return this.code.split(' ')},cursorIndex() {// Determine the length of code input, and the cursor is displayed on the corresponding labelreturnThis.code.length}}, watch: {code(newVal) {this.code = newval.replace (/[^\d]/g,' ')
        if(newval.length > 5) {// Disable input && lose focus to make the keyboard disappear this.teldisabled =true
          this.$refs.vcode.blur()
        // submit !!!
          setTimeout(() => {
            alert(`vcode: ${this.code}')}, 500)}},mounted() {}})Copy the code

Consider the interaction, do some details and restrictions in it, slowly taste ~

If there are similarities, 100% coincidence

preview

Making address:

Github.com/useryangtao…