vue-filter-input v1.0.4
vue-filter-input
a vue directive to filter input
轻量级限制用户输入自定义指令,可对中文输入法生效。
预设 number(纯数字)、letter(纯字母)两种输入类型。
How to use ?
step 1. Install vue-filter-input
安装依赖包
npm install vue-filter-input --save
指令注册
import inputFilter from 'vue-filter-input';
Vue.use(inputFilter);
step 2. Use it
使用预设类型
<input v-input-filter:number>
<input v-input-filter:letter>
使用自定义类型
<input v-input-filter="options">
export default {
data () {
return {
options: {
legalReg: [],
illegalReg: [],
legalKeyCode: [8, 32, 37, 38, 39, 40, 46], // 默认允许的keycode
legalKeyCodeRange: [],
illegalKeyCode: [],
illegalKeyCodeRange: [],
oninput: null,
onkeydown: null
}
};
}
};
options字段说明
legalReg
字段名:legalReg
类型:Array
含义:合法字符正则表达式数组,主要针对中文输入法输入内容(包括复制粘贴内容),当任一正则匹配通过时,允许输入。
示例:
legalReg = [/^[0-9]{1,}$/, /^[a-zA-Z]{1,}$/]; // 输入内容为字母或者数字时允许输入
illegalReg
字段名:illegalReg
类型:Array
含义:非法字符正则表达式数组,主要针对中文输入法输入内容(包括复制粘贴内容),当任一正则匹配通过时,不允许输入。
示例:
illegalReg = [/^[0-9]{1,}$/, /^[a-zA-Z]{1,}$/]; // 输入内容为字母或者数字时不允许输入
legalKeyCode
字段名:legalKeyCode
类型:Array
含义:合法的按键keycode,针对英文输入法,当keycode存在于数组中时,允许输入,否则屏蔽按键事件。
示例:
legalKeyCode = [32, 8]; // 按键为spacebar或者backspace时,允许输入
legalKeyCodeRange
字段名:legalKeyCodeRange
类型:Array
含义:合法的按键keycode范围,针对英文输入法,当keycode在任一范围内时,允许输入,否则屏蔽按键事件。
示例:
legalKeyCodeRange = [
{
min: 1,
max: 20
},
{
min: 25,
max: 60
}
]; // 按键keycode在1~20或者25~60时,允许输入
illegalKeyCode
字段名:illegalKeyCode
类型:Array
含义:非法的按键keycode,针对英文输入法,当keycode存在于数组中时,屏蔽按键事件。
示例:
illegalKeyCode = [32, 8]; // 按键为spacebar或者backspace时,不允许输入
illegalKeyCodeRange
字段名:illegalKeyCodeRange
类型:Array
含义:非法的按键keycode范围,针对英文输入法,当keycode在任一范围内时,屏蔽按键事件。
示例:
illegalKeyCodeRange = [
{
min: 1,
max: 20
},
{
min: 25,
max: 60
}
]; // 按键keycode在1~20或者25~60时,不允许输入
oninput
字段名:oninput
类型:Function
含义:绑定指令的dom oninput
事件回调函数,处理输入的内容。默认为null,采用指令默认处理方式(使用legalReg illegalReg
进行正则判断)。
示例:
oninput = function (input) { // input 为每次输入的内容
return input === 'y'; // 返回 true 或者 false, true 则允许输入, false则不允许
};
onkeydown
字段名:onkeydown
类型:Function
含义:绑定指令的dom onkeydown
事件回调函数,处理按键keycode。默认为null,采用指令默认处理方式(使用legalKeyCode legalKeyCodeRange illegalKeyCode illegalKeyCodeRange
进行判断)。
示例:
onkeydown = function (keycode) { // keycode 为按键keyCode
return keycode === 32; // 返回 true 或者 false, true 则允许输入, false则不允许,阻止按键事件
};
注意
指令分为两个处理阶段:按键阶段、输入内容阶段,其中按键阶段主要针对英文输入法,输入内容阶段针对中文输入法。
配置对象中各个属性在两阶段中的优先级如下:
- 按键阶段:
onkeydown
>legalKeyCode
=legalKeyCodeRange
>illegalKeyCode
=illegalKeyCodeRange
- 输入内容阶段:
oninput
>legalReg
>illegalReg
优先级靠前的任意属性判断通过之后,都不会针对后面的属性进行判断。
完整示例
<template>
<input v-input-filter:number>
<input v-input-filter:letter>
<input v-input-filter="options">
</template>
<script>
export default {
data () {
return {
options: { // 仅允许输入数字、大小写字母、小数点
legalReg: [/^[0-9]{1,}$/, /^[a-zA-Z]{1,}$/],
legalKeyCode: [8, 32, 37, 38, 39, 40, 46, 190],
legalKeyCodeRange: [
{
min: 65,
max: 90
},
{
min: 48,
max: 57
},
{
min: 96,
max: 105
}
]
}
};
}
};
</script>