vue 注册自定义指令，对输入框输入内容过滤（区分中英文）

来一颗砂糖橘2024-04-22 20:54

注册vue全局指令

对el-input输入框进行最大长度过滤（区分中英文）

过滤空格

注册全局指令

main.js

javascript 复制代码

/**
 * 输入框最长输入限制
 * @param {*} e 文本内容
 * @param {number} maxlength 最大字符长度
 * @param {boolean} trim 是否过滤空格
 * @returns {string} 最终文本
 */
const checkLength = (e, maxlength, trim) => {
  let b = 0; // 输入的字符数
  let r = String(e);//过滤掉所有空格
  if (trim) {
    r = String(e).replace(/\s+/g, "")
  }
  const reg = /^[\u0000-\u00ff]$/; //排除汉字和中文字符
  const len = r.length
  for (let i = 0; i < len; i++) {
    let c = r.charAt(i);
    if (reg.test(c)) {
      b++;
    } else {
      b += 2;
    }
    if (b > maxlength) { // 字符长度限制
      r = r.substr(0, i);
      break;
    }
  }
  return r
};

// 自定义指令-输入文本过滤
Vue.directive('limit-input', {
  bind(el, bindings, vnode) {
    const maxlength = typeof(bindings.value)=='object'
      ?bindings.value.maxlength
      :bindings.value;
    const trim = typeof(bindings.value)=='object'
      ?bindings.value.trim
      :false;
      
    el.addEventListener('input', (e) => {
      e.target.value = checkLength(e.target.value, maxlength, trim);
    });
  }
});

使用

test.vue

html 复制代码

<template>
	<div>
    <el-input
      clearable
      v-limit-input="{
        maxlength: 100,
        trim: true,
      }"
    ></el-input>

    <el-input
      type="textarea"
      v-limit-input="{
        maxlength: 400,
        trim: false,
      }"
    ></el-input>
  </div>
</template>