JS实现手机端输入验证码的方法

这篇文章主要讲解了JS实现手机端输入验证码的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

创新互联建站长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为安仁企业提供专业的成都网站制作、网站设计,安仁网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

想法:

1、使用label标签做显示验证码的框,

2、然后每个label for属性指向同一个 id 为vcode 的input,

3、为了能够触发input焦点, 将input 改透明度样式隐藏,

4、这样就实现了 点击label触发 input焦点,调用键盘。

运行效果:

JS实现手机端输入验证码的方法

示例代码:

结构部分html:

验证码:

css部分:

Javascript部分

1、通过cdn引入vue.js

2、代码

var app = new Vue({
    el: '#app',
    data: {
      code: '',
      codeLength: 6,
      telDisabled: false,
      focused: false
    },
    computed: {
      codeArr() {
        return this.code.split('')
      },
      cursorIndex() {
        return this.code.length
      }
    },
    watch: {
      code(newVal) {
        this.code = newVal.replace(/[^\d]/g,'')
        if (newVal.length > 5) {
          // this.telDisabled = true
          this.$refs.vcode.blur()
          setTimeout(() => {
            alert(`vcode: ${this.code}`)
          }, 500)
        }
      }
    },
  })

看完上述内容,是不是对JS实现手机端输入验证码的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


网站题目:JS实现手机端输入验证码的方法
标题路径:http://myzitong.com/article/jjsipg.html