vue3中设置页面只支持英文输入法

来一杯冰可罗

已于 2023-12-19 10:39:24 修改

阅读量757

点赞数

文章标签： javascript vue.js 开发语言前端

于 2023-12-15 16:33:48 首次发布

本文链接：https://blog.csdn.net/foreverhui/article/details/135020278

版权

文章介绍了如何在Vue.js应用中，通过main.js配置并创建三个不同类型的自定义指令(input-english)，分别用于只允许输入英文字母和数字、不允许中文字符、以及只允许英文字母+符号+数字。指令通过监听input事件和正则表达式实现字符过滤。

摘要由CSDN通过智能技术生成

1，main.js配置注册自定义指令

2，在自定义指令中编写逻辑，具体业务场景分情况如下：

只允许输入英文字母和数字

 app.directive('input-english', {
    mounted(el) {
       el.addEventListener('input', (event: InputEvent) => {
        const regex = /^[a-zA-Z]*$/; // 正则表达式，只允许输入英文字符
         const value = (event.target as HTMLInputElement).value;
 
        if (!regex.test(value)) {
//           // 如果输入不符合要求，设置输入框的值为纯英文字符
           (event.target as HTMLInputElement).value = value.replace(/[^a-zA-Z]/g, '');
        }
       });
     },
 });

不允许输入中文字符和汉字

 /app.directive('input-english', {
     mounted(el) {
      el.addEventListener('input', (event: InputEvent) => {
         const value = (event.target as HTMLInputElement).value;
        const englishOnlyValue = value.replace(/[\u4E00-\u9FFF\u3000-\u303F\uFF00-\uFFEF]/g, '');
        if (value !== englishOnlyValue) {
           (event.target as HTMLInputElement).value = englishOnlyValue;
         }
      });
    },
 });

在正则表达式/[\u4E00-\u9FFF\u3000-\u303F\uFF00-\uFFEF]/g中，我们添加了\u3000-\u303F和\uFF00-\uFFEF来包含常见的中文符号范围。这样，这些中文符号也将被替换为空字符串。

只允许输入英文字母+符号+数字

 app.directive('input-english', {
  mounted(el) {
    el.addEventListener('input', (event: InputEvent) => {
      const value = (event.target as HTMLInputElement).value;
      const englishOnlyValue = value.replace(/[^\x00-\x7F]/g, '');

      if (value !== englishOnlyValue) {
        (event.target as HTMLInputElement).value = englishOnlyValue;
      }
    });
  },
});