手机端实现6位短信验证码input输入框效果（样式及代码方法）

微信移动端4位、6位、多位验证码密码输入框功能的实现代码，实现思路：

方案1：

写一个简单的input框。

评估：样式不好看，待定。

 

方案2：

就是用6个input框，每输入一个数字之后，切换到下一个input，即切换focus，删除的时候，同理。自测发现安卓机很流畅，但ios微信端并不是那么流畅，ios默认输入法输入也有点瑕疵。

评估：感叹一下万能的安卓，吐槽下wechat里ios版本更新慢，该方案可能要pass。

方案3：

用6个span标签。即放置一个输入框，隐藏其文字和位置，label>span*6。

评估：解决了绝大多数问题，很多公司都是类似的方案。

最终结果：
由于工程紧迫项目小，还考虑到一些其他外部原因，我们美丽的产品大人拍板了第一种方案。虽说兜兜转转又回到了圆点，但是大人给我的启发实实不可忽略。

 

下面是我开Vue工程，打的demo：

demo

 

 

下面是Vue工程demo代码：

 Vue组件代码：template内容：

<template>
  <div class="input-captcha-20190115">
    <h3>栗子1：简单的input框h3>
    <div class="input-box">
      <input v-model.trim="simpleInput0" type="number" placeholder="请输入六位数字验证码">
    div>
    <br>
    <br>
    <h3>栗子2：由六个span代替输入框h3>
    <div class="input-box">
      <div class="tips">用六个span代替输入框：div>
      <label class="simple-input-content" for="simpleInput1">
        <span class="highlight">{{simpleInput1.slice(0,1)}}span>
        <span :class="simpleInput1.length > 1?'highlight':''">{{simpleInput1.slice(1,2)}}span>
        <span :class="simpleInput1.length > 2?'highlight':''">{{simpleInput1.slice(2,3)}}span>
        <span :class="simpleInput1.length > 3?'highlight':''">{{simpleInput1.slice(3,4)}}span>
        <span :class="simpleInput1.length > 4?'highlight':''">{{simpleInput1.slice(4,5)}}span>
        <span :class="simpleInput1.length > 5?'highlight':''">{{simpleInput1.slice(5,6)}}span>
      label>
      <div class="tips">要隐藏的输入框：div>
      <input id="simpleInput1" v-model.trim="simpleInput1" type="number" placeholder="请输入六位数字验证码">
    div>
    <br>
    <br>
    <h3>栗子3：由六个input组成h3>
    <div class="input-box">
      <div class="input-content">
        <input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="空">
        <input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="空">
        <input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="空">
        <input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input4')" type="number" placeholder="空">
        <input v-model.trim.number="input4" ref="input4" @keydown.8="deleteValue('input4','input3')" @keyup="changeValue($event,'input4','input5')" type="number" placeholder="空">
        <input v-model.trim.number="input5" ref="input5" @keydown.8="deleteValue('input5','input4')" @keyup="changeValue($event,'input5','input5')" type="number" placeholder="空">
      div>
    div>
  div>
template>

View Template Code

 

 Vue组件代码：script内容：

View JavaScript Code

 

 Vue组件代码：style[lang=less]内容：

View Style Code

 

Vue挂载标签

样式：

 

Vue工程demo中的知识点：

1.在Chrome与火狐中，输入框input类型为number时，如何去除掉的自带的上下默认箭头

2.键盘按钮keyCode大全：获取按键对应的键值的方法

 

 

转载于:https://www.cnblogs.com/ziChin/p/10273980.html