Input的常用业务实例实现

最近写业务的时候一直在和Input打交道，下面几种常见的业务代码分享给大家，以下代码均使用vue框架语法。

验证码四个Input的焦点获取、连删实现，复制

使用场景：验证码的校验，在输入一个验证码之后，焦点移动到自动向像一个输入框

焦点获取

实现思路： 获取下一个dom节点，然后focus

<Inputv-for="(code, ind) in codeNameMap":id="`input${code}`" // 用户获取input节点:key="code"v-model="exchangeCode[code]"class="code-input":max-length="1"@input="(e) => ind < 4 && handleInput(e, `input${codeNameMap[ind + 1]}`)" // 输入的时候获取下一个位置焦点
/>

const exchangeCode: any = reactive({one: '',two: '',thr: '',four: '',})
const domFocus = (code: string) => {nextTick(() => {const dom = document.getElementById(code)const inputDom = dom?.getElementsByTagName('input')if (inputDom) inputDom[0].focus() // 获取焦点、 // 使用的组件所以input内容较深，大家可根据自己使用情况去获取})}function handleInput(event: any, nextInput: string) {if (event.target.value.length === event.target.maxLength && nextInput !== null) {domFocus(nextInput)}}

复制功能

实现思路： 获取当前输入框的复制内容，再主动赋值，这里赋值的时候提高用户体验，也将焦点获取定位

// input 节点内加入该方法，参照上面Input、这里ind表示需要从哪一个input框开始复制@paste="(e:any) => handlePaste(e, ind)"

  const handlePaste = (e: any, ind: number) => {const codeNameMap = Object.keys(exchangeCode)const copyText = e.clipboardData.getData('text') // 获取复制内容const needCodeLen = codeNameMap.lengthconst copyTextLen = copyText.lengthconst copyLen = copyTextLen < needCodeLen ? copyTextLen + ind : needCodeLen // 通过复制内容长度和需要的code长度 获取 真正需要复制的内容及位置for (let i = ind; i < copyLen; i++) {exchangeCode[codeNameMap[i]] = copyText[i - ind]}// 焦点移动if (needCodeLen - ind > copyTextLen) {const focusDom = `input${codeNameMap[ind + copyTextLen]}`domFocus(focusDom)e.preventDefault() // 禁止input操作，否则焦点会变成双跳}}

连删

实现思路： 监听键盘时间，在键盘为删除的时候清空input数据，并且焦点回到上一个Input

// input 节点内加入该方法，参照上面Input、这里ind表示需要从哪一个input框开始删除
@keyup="(e:any)=>handleKeyUp(e,ind)"

// 在Input内加入方法 @keyup="(e:any)=>handleKeyUp(e,ind)"const handleKeyUp = (event: any, ind: number) => {if (event.key === 'Backspace' || event.key === 'Delete') {if (ind > 0) {const focusDom = `input${codeNameMap[ind - 1]}`domFocus(focusDom)}}}

输入框特殊字符实时校验, 及长度限制

使用场景：实时校验昵称之类的输入限制，
注意：实时校验会遇到一个问题，无法连续输入长中文
实现思路： 使用input的API，compositionStart compositionEnd 在输入长中文的时候，不对input做实时校验，长中文输入完成再进行校验

<Inputv-model="nick_name"placeholder="请输入昵称"clearable@input="handleInputNickName"@compositionstart="compositionStart"@compositionend="compositionEnd"
/>

  const DEFAULT_LEN = 11const isInputChinese = ref(false) // 是否在输入长中文const handleInputNickName = e => {if (isInputChinese.value) {return}const value = e.target.valueconst pattern = /[^\u4e00-\u9fa5a-zA-Z\d]/g // 只保留中英文数字const patternTest = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/const isValid = patternTest.test(value)if (!isValid && value.trim()) {toast.warning('不支持特殊字符')}const newValue = value.replace(pattern, '')if (e.target.value.length > DEFAULT_LEN) {toast.warning('最多支持11个字符')}e.target.value = newValue.slice(0, 11) // 字数截断}const compositionStart = () => {isInputChinese.value = true}const compositionEnd = e => {// 长中文输入结束，需要对字符数量进行判断并且截断isInputChinese.value = falseconst newValue = e.target.valueif (newValue.length > DEFAULT_LEN) {toast.warning('最多支持11个字符')e.target.value = newValue.slice(0, 11)}}