JS/JQ实现小程序/H5验证码页面

话不多说，先上效果图

核心代码

1、html/css关键代码

2、js关键代码

autoSubmodify(code) {
	let strCode = ''
	if(!code) {
		let val = $("#input-0").val() || ''
		let val1 = $("#input-1").val() || ''
		let val2 = $("#input-2").val() || ''
		let val3 = $("#input-3").val() || ''
		let val4 = $("#input-4").val() || ''
		let val5 = $("#input-5").val() || ''
		strCode = '' + val + val1 + val2 + val3 + val4 + val5
	}
    // 提交操作
	// ...
},

keydown(e) {
      var index = e.target.dataset.index * 1;
      var el = e.target;
			var ref = `#input-${index}`
      if (e.key === 'Backspace') {
				console.log($(ref).val())
        if ($(ref).val() !== '' && $(ref).val() !== undefined) {
          $(ref).val('')
        } else {
          if (el.previousElementSibling) {
            el.previousElementSibling.focus()
						var preRef = `#input-${index - 1}`
            $(preRef).val('')
          }
        }
      } else if (e.key === 'Delete') {
        if (($(ref).val()).length > 0) {
          $(ref).val('')
        } else {
          if (el.nextElementSibling) {
            $("#input-1").val('')
          }
        }
        if (el.nextElementSibling) {
          el.nextElementSibling.focus()
        }
      } else if (e.key === 'Home') {
        el.parentElement.children[0] && el.parentElement.children[0].focus()
      } else if (e.key === 'End') {
        el.parentElement.children[5] && el.parentElement.children[5].focus()
      } else if (e.key === 'ArrowLeft') {
        if (el.previousElementSibling) {
          el.previousElementSibling.focus()
        }
      } else if (e.key === 'ArrowRight') {
        if (el.nextElementSibling) {
          el.nextElementSibling.focus()
        }
      } else if (e.key === 'ArrowUp') {
        if ($(ref).val() * 1 < 9) {
					let newVal = ($(ref).val() * 1 + 1).toString()
					$(ref).val(newVal)
        }
      } else if (e.key === 'ArrowDown') {
        if ($(ref).val() * 1 > 0) {
					let newVal = ($(ref).val() * 1 - 1).toString()
					$(ref).val(newVal)
        }
      } else if (e.key === 'Enter') {
        // 确认
				this.autoSubmodify()
      }
    },

keyup(e) {
      var index = e.target.dataset.index * 1;
      var el = e.target;
			var ref = `#input-${index}`
      if (e.code !== 'NumpadEnter' && e.code !== 'Enter' && parseFloat(e.target.value).toString() != "NaN") {
        el.nextElementSibling && el.nextElementSibling.focus();
        if (index === 5) {
					let val = $("#input-0").val()
					let val1 = $("#input-1").val()
					let val2 = $("#input-2").val()
					let val3 = $("#input-3").val()
					let val4 = $("#input-4").val()
					let val5 = $("#input-5").val()
          if (val && val1 && val2 && val3 && val4 && val5) {
						let code = '' + val + val1 + val2 + val3 + val4 + val5
						this.autoSubmodify(code)
          }
        }
      } else {
        if ($(ref).val() === '') {
          $(ref).val('')
        }
      }
    },

mousewheel(e) {
      var index = e.target.dataset.index;
			var ref = `#input-${index}`
      if (e.wheelDelta > 0) {
        if ($(ref).val() * 1 < 9) {
					let newVal = ($(ref).val() * 1 + 1).toString()
					$(ref).val(newVal)
        }
      } else if (e.wheelDelta < 0) {
				if ($(ref).val() * 1 > 0) {
					let newVal = ($(ref).val() * 1 - 1).toString()
					$(ref).val(newVal)
        }
      } else if (e.key === 'Enter') {
				let val = $("#input-0").val()
				let val1 = $("#input-1").val()
				let val2 = $("#input-2").val()
				let val3 = $("#input-3").val()
				let val4 = $("#input-4").val()
				let val5 = $("#input-5").val()
				if (val && val1 && val2 && val3 && val4 && val5) {
					document.activeElement.blur();
					let code = '' + val + val1 + val2 + val3 + val4 + val5
					this.autoSubmodify(code)
				}
      }
    },

// 复制粘贴
paste(e) {
			let _this = this
      // 当进行粘贴时
      e.clipboardData.items[0].getAsString(str => {
        if (str.toString().length) {
          let codeList = str.split('')
          document.activeElement.blur()
          codeList.forEach((num, index) => {
						$(`#input-${index}`).val(num)
					})
        }
				if(str.toString().length === 6) {
					_this.autoSubmodify(str)
				}
      })
    }

完！