网站开发发现趋势,软件开发公司有哪些部门,行政审批网站开发文档,网站的外链是什么组件功能分析 1.按键删除#xff0c;清空当前input#xff0c;并跳转prevInput 获取焦点,按键delete#xff0c;清空当前input#xff0c;并跳转nextInput 获取焦点。按键Home/End键#xff0c;焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击…组件功能分析 1.按键删除清空当前input并跳转prevInput 获取焦点,按键delete清空当前input并跳转nextInput 获取焦点。按键Home/End键焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。 2.判断按键为数字则取第一个数字然后跳转下一个input输入框获取焦点如果为最后一个则失去焦点交互结束。 3.粘贴功能。通过el.clipboardData获取粘贴内容判断是否为4/6位粘贴内容。是则赋值给页面Input双向绑定一个数组即可。否则置为空。
代码展示
templatediv classg-remove-check-codep classg-remove-check-code_title发送验证码/pdiv classg-remove-check-codep classg-remove-check-code_title请输入短信验证码以验证您的身份/pdivclassg-remove-check-code_contentkeyupfnCheckCodeKeyupkeydownfnCheckCodeKeydownpastefnCheckCodeKeyPasteinputfnCheckCodeInputEventinput :class{g-code-input_color: aCheckCodeInputComputed[0] ! } max9 min0 maxlength1 data-index0 v-model.trim.numberaCheckCodeInputComputed[0] typetext reffirstInputRef /input :class{g-code-input_color: aCheckCodeInputComputed[1] ! } max9 min0 maxlength1 data-index1 v-model.trim.numberaCheckCodeInputComputed[1] typetext /input :class{g-code-input_color: aCheckCodeInputComputed[2] ! } max9 min0 maxlength1 data-index2 v-model.trim.numberaCheckCodeInputComputed[2] typetext /input :class{g-code-input_color: aCheckCodeInputComputed[3] ! } max9 min0 maxlength1 data-index3 v-model.trim.numberaCheckCodeInputComputed[3] typetext //div/divdiv classbtn-boxbutton:disabled!turnOffcontent-text下一步clickEvententer//div/div
/div
/templatescript langts setup
import { defineComponent, ref, onMounted, onUnmounted, reactive, computed, getCurrentInstance, inject } from vue;let aCheckCodeInput ref([, , , ]) // 存储输入验证码内容let aCheckCodePasteResult ref([]) const turnOff computed(() {return aCheckCodeInputComputed.value.filter((v) !!v)?.length 4;});onUnmounted(() {clearInterval(timer.value);})const enter async () {console.log(your code,aCheckCodeInputComputed.value.join().toUpperCase())}const aCheckCodeInputComputed computed(() {if(aCheckCodePasteResult.value.length 4) {return aCheckCodePasteResult.value;} else if (aCheckCodeInput.value Array.isArray(aCheckCodeInput.value) aCheckCodeInput.value.length 4) {return aCheckCodeInput.value;} else if (/^\d{4}$/.test(aCheckCodeInput.value.toString())) {return aCheckCodeInput.value.toString().split();} else {return new Array(4);}})// 输入验证码更新验证码数据const fnCheckCodeKeyup (e: any) {let index e?.target?.dataset.index * 1;let el e.target;// 解决输入e的问题el.value el.value.replace(/Digit|Numpad/i, ).slice(0, 1);if (/Digit|Numpad/i.test(e.code)) {// 必须在这里赋值否则输入框会是空值aCheckCodeInput.value.splice(index, 1, e.code.replace(/Digit|Numpad/i, ));el.nextElementSibling el.nextElementSibling.focus();if (index 3) {if (aCheckCodeInput.value.join().length 4) (document.activeElement as any).blur();}}}// 输入验证码检测位置变化const fnCheckCodeKeydown (e: any) {let index e?.target?.dataset?.index * 1;let el e.target;if (e?.key Backspace) {if (aCheckCodeInput.value[index].length 0) {aCheckCodeInput.value.splice(index, 1, );} else {if (el.previousElementSibling) {el.previousElementSibling.focus();aCheckCodeInput.value[index - 1] ;}}} else if(e?.key Delete) {if (aCheckCodeInput.value[index].length 0) {aCheckCodeInput.value.splice(index, 1, );} else {if(el.nextElementSibling) {el.nextElementSibling.focus();aCheckCodeInput.value[index] ;}}} else if (e?.key Home) {el?.parentElement?.children[0] el.parentElement.children[0].focus();} else if (e?.key End) {el?.parentElement?.children[aCheckCodeInput.value.length - 1] el?.parentElement?.children[aCheckCodeInput.value.length - 1].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 Enter) {this.doActive()}}// 输入验证码解决一个输入框输入多个字符的问题const fnCheckCodeInputEvent (e: any) {let index e?.target?.dataset?.index * 1;let el e?.target;el.value el?.value.replace(/Digit|Numpad/i, ).slice(0, 1);aCheckCodeInput.value[index] el.value;}// 验证码粘贴const fnCheckCodeKeyPaste (e: any) {e?.clipboardData?.items[0].getAsString((str: string) {if (str.toString().length 4) {aCheckCodePasteResult.value str.split() as any;(document.activeElement as any).blur();aCheckCodeInput.value aCheckCodeInputComputed.value;aCheckCodePasteResult.value [];} else {// 如果粘贴内容不合规清除所有内容aCheckCodeInput.value [, , , ];}});}
/script
style scoped langscss
.g-remove-check-code {width: 100%;padding: 4px 0 8px 0;
}.g-remove-check-code .g-remove-check-code_title {font-size: 14px;color: #666;
}.g-remove-check-code .g-remove-check-code_content {display: flex;justify-content: space-between;align-items: center;width: 400px;padding: 28px 0 28px 0;margin: 0 auto;
}.g-remove-check-code .g-remove-check-code_content input {width: 50px;height: 50px;font-size: 36px;text-align: center;border: none;outline: none;border: solid 1px rgba(187, 187, 187, 100);border-radius: 4px;-moz-appearance: textfield;
}.g-remove-check-code .g-remove-check-code_content input.g-code-input_color {border-color: #5290FF;
}.g-remove-check-code .g-remove-check-code_content input::-webkit-outer-spin-button,
.g-remove-check-code .g-remove-check-code_content input::-webkit-inner-spin-button {appearance: none;margin: 0;
}.g-remove-check-code .g-remove-check-code_tip {font-size: 14px;color: #999;text-align: center;
}
/style
效果展示
