input 超出maxlength限制后，输入框变红

一、前言

最近收到产品的一个需求：输入框限制了maxlength=“11”，需要在输入第12位时，输入框变红；当然，第12位是不能真正输入到输入框中的。

二、实现难点

其实，单纯的要监听 字母和数字以及字符 还是比较容易实现的，通过监听 keyup、input 基本都能做到。但是，有一个问题就是：在输入中文时，还是拼写，这时输入框也需要变红，上面的事件就监听不到。需要单独的事件 compositionstart、compositionend。
实现难点有以下两个：

1. input 怎么区分输入的是中文 和 （英文或者数字）

方法一：监听 compositionstart、compositionend 和 input或者keyup 这三个事件

方法二：InputEvent：isComposing 属性 ==> MDN解释表示事件是否是在 compositionstart 之后且在 compositionend 之前触发的。

解析compositionstart、compositionend：

• compositionstart 开始输入中文拼音，但没确定输入到输入框内
• compositionend 介绍中午拼写，对于文字已录入到输入框
• 输入英文和数字，特殊字符不会触发

2. vue自定义指令，在同时绑定多个事件时，怎么在多个事件中传参（可能用不到）

在绑定的事件中，对事件源进行处理；将参数放到 e.target.参数名 = '参数值' => 这样在每个事件源中都能获取到参数

三、自定义指令实现限制输入框最大长度，达到限制长度再次输入时，输入框变红

/*** 限制输入框最大长度，达到限制长度再次输入时，输入框变红* 用法：v-input-maxlength="6" 不能在标签上配置 maxlength 属性*/
Vue.directive('input-maxlength', {bind(el, binding, vnode) {const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');ele.addEventListener('compositionend', maxInputCallback(el, ele, binding.value), false)ele.addEventListener('input', maxInputCallback(el, ele, binding.value), false);ele.addEventListener('focus', maxInputFocus(el, ele), false);ele.addEventListener('blur', maxInputBlur(el, ele), false);},unbind(el) {const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');ele.removeEventListener('compositionend', maxInputCallback(el, ele), false);ele.removeEventListener('input', maxInputCallback(el, ele), false);ele.removeEventListener('focus', maxInputFocus(el, ele), false);ele.removeEventListener('blur', maxInputBlur(el, ele), false);}
});function maxInputCallback(el, ele, maxLength ) {function handler(e) {// 指令事件间传参，// e.target.test = '123';   => 这样在其他事件中就能通过e.target获取了if( maxLength === undefined ) return;let val = ele.value;if( val.length > maxLength && !e.isComposing ) {  // 这个条件有一个小问题，当输入达到限制后，正在拼中文时（e.isComposing = true）边框是蓝色的ele.value = val.substr(0, maxLength);ele.style.border = '1px solid #F00';} else {ele.style.border = '1px solid #409EFF';}}return handler;
}function maxInputFocus(el, ele) {function handler(e) {ele.style.border = '1px solid #409EFF';}return handler;
}
function maxInputBlur(el, ele) {function handler(e) {ele.style.border = '1px solid #DCDFE6';}return handler;
}------------分割线：如果监听keyup事件，可以参考下面代码，但会有很多问题。最好不要使用------------
function maxInputKeyup(el, ele ) {const maxLength = ele.getAttribute('maxlength');const regex = /^[a-zA-Z0-9~!@#$%^&*()-=_+{}<>?:"',./\[\]]$/;  // 不支持空格let oldLimitLength = false; // 上一次输入是否达到限制长度function handler(e) {let val = ele.value;/*** val.length >= maxLength 是当前输入是否达到限制长度* oldLimitLength 是上一次输入是否达到限制长度* 如果当前输入达到限制长度，并且上一次输入没有达到限制长度，则表示为正好输入到限制长度（只要一个条件无法判断这种情况）* 如果当前输入长度小于限制长度，但上一次输入达到限制长度，则表示为删除操作=>删除了限制字符的最后一个字符*/console.log('------>>> 333333333',e, regex.test(e.key), e.isComposing);// 在输入限制的最后一个字符并且是输入中文时会有问题 if( regex.test(e.key) && val.length >= maxLength && oldLimitLength ) {ele.style.border = '1px solid #F00';} else {ele.style.border = '1px solid #409EFF';}if (val.length >= maxLength) {oldLimitLength = true;} else {oldLimitLength = false;}}return handler;
}

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！