element中el-input输入框控制字符长度,汉字算两个字符

<el-input v-model="inputValue" maxlength="10" style="width: 20%" placeholder="请输入(一个汉字等于两个字符)" @input="checkLength"></el-input>
<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref('');
const checkLength = e => {
  let b = 0; // 输入的字符数
  for (let i = 0, length = e.length; i < length; i++) {
    let c = e.charAt(i);
    if (/^[\u0000-\u00ff]$/.test(c)) {
      b++;
    } else {
      b += 2;
    }
    if (b > 10) { // 字符长度限制
      inputValue.value = e.substr(0, i);
      if (/^[\u0000-\u00ff]$/.test(c)) {
        b--;
      } else {
        b -= 2;
      }
      break;
    }
  }
};
</script>

 

posted @ 2023-04-07 10:00  rachelch  阅读(2357)  评论(0编辑  收藏  举报