vue 监听input全角转半角

最新推荐文章于 2024-07-22 15:13:59 发布

小芒前端

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量97

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wpf_China/article/details/139771665

版权

<template>
  <div>
    <input v-model="inputValue" @input="convertToHalfWidth" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    convertToHalfWidth(event) {
      const { target } = event;
      const value = target.value;
      const halfWidthValue = value.replace(/[\uff01-\uff5e]/g, (match) => {
        return String.fromCharCode(match.charCodeAt(0) - 0xfee0);
      });
      this.inputValue = halfWidthValue;
      // 更新视图，防止ngModel失效
      this.$nextTick(() => {
        target.value = halfWidthValue;
      });
    }
  }
};
</script>