el-input 禁止输入特殊字符

Posted 2021-09-10 Frazier.

<template>
  <div>
    <el-input
      size="small"
      v-model="city"
      placeholder="请输入名称"
      @keyup.native="btnUp"
      @keydown.native="btnDown"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: "input",
  data() {
    return {};
  },
  methods: {
    //限制输特殊字符
    btnUp(e) {
      e.target.value = e.target.value.replace(
        /[`~!@#$%^&*()_\\-+=<>?:"{}|,.\\/;'\\\\[\\]·~！@#￥%……&*（）——\\-+={}|《》？：“”【】、；‘’，。、]/g,
        ""
      );
    },
    // 只能输英文、数字、汉字
    btnDown(e) {
      e.target.value = e.target.value.replace(
        /[^\\a-\\z\\A-\\Z0-9\\u4E00-\\u9FA5]/g,
        ""
      );
    },
    //  只能输数字
    // UpNumber(e) {
    //   e.target.value = e.target.value.replace(/[^\\d]/g, "");
    // },
  },
};
</script>

使用 keyup等事件需添加 .native 要不无法正常执行事件