输入框半角字符自动转全角字符

背景

某某行对于地址，姓名等字段在后端存储只能存储全角字符如：湖南省长沙市望城区大泽湖街道ＸＸＸ街道ＸＸＸ小区１栋２单元２６０１室。

解决方案

方案一：blur域后事件(失焦事件)后整体将输入框值由半角字符转全角字符

此方案直接在blur事件后通过正则表达式校验即可，但不能实时看到效果。

方案二：输入框直接限制半角字符输入

此方案可以直接限制用户输入，但输入时需要用户切换为全角输入法，使用较麻烦。

方案三：输入框半角字符实时转换为全角字符

无需切换输入法，且能实时将半角字符转化为全角字符，方便用户看到实时效果。

案例代码

<el-input 
  placeholder="半角字符自动转全角字符" 
  v-model="input" 
  @input="handleInput"
  @compositionstart.native="handleCompositionStart"
  @compositionend.native="handleCompositionEnd">
</el-input>
<script>
export default {
  data() {
    return {
      input: '',
      isComposing: false //是否正在使用输入法组合输入
    }
  },
  methods: {
      handleCompositionStart() {
       this.isComposing = true;
      },
      handleCompositionEnd(e) {
       this.isComposing = false;
       this.input = this.toFullWidth(e.target.value);
      },
      handleInput(value) {
        if(this.isComposing) return;//正在使用输入法输入中文
        this.input = this.toFullWidth(value);
      },
      // 半角转全角
      toFullWidth(str){
        return str.replace(/[\x20-\x7E]/g, (char) =>{
          const code = char.charCodeAt(0);
          if (code===32) {
            return "\u3000";//全角空格
          }else if(code >=33 && code<= 126){
            return String.fromCharCode(code + 65248);// 半角转全角
          }
          return char;
        });
      }
    }
}
</script>

说明

1.添加compositionstart和compositionend方法的目的是避免中文输入法时input事件持续触发，导致拼音也当作输入内容处理； 2.compositionstart和compositionend加.native修饰符监听原生dom事件的原因如果输入组件不是使用el-input组件，而是使用在el-input基础上封装的业务组件并且未通过$emit暴露给父组件使用，就会导致compositionstart和compositionend事件不生效； 3.如果有element-ui源码或者自行造轮子写了一套组件库或者二次封装时可将以上代码逻辑迁移到组件库源码中，通过在props中定义一个属性如is-to-full-width(是否半角字符自动转全角字符)，默认false即可；应用层使用代码如下案例：

<el-input v-model="input" is-to-full-width></el-input>