记录下ios中文输入法时输入字母带有空格的解决方案

#简言
在ios原生输入框时,中文输入法输入时,输入框中的字母会有空格间隔。

去掉空格

这个空格的字符是 \u2006 ,这个字符在经过编码处理后会变成?显示。
这明显不符合要求,所以我们要把他替换掉。

val.replace(/\u2006/g, "")

vue中v-model解决方案

在vue项目中,使用v-model 有可能碰到这个bug。解决方法利用上面进行替换就行。
替换时机我选择的是输入框失去焦点时进行替换
然后将值更新。

blurFn(event, keyStr) {
      if (event) {
        let val = event.detail.value;
        val = val.replace(/\u2006/g, ""); //  去除ios输入字母时的六分之一空格
        setNestedPropertyValue(this, keyStr, val);
      }
    },
 

setNestedPropertyValue 函数是对象根据key链进行赋值操作的函数。实现如下:

/**
 *  根据属性键链字符串设置属性值
 * @param {*} obj obj 对象
 * @param {*} keyChain  key键链
 * @param {*} value  值
 * @returns
 */
function setNestedPropertyValue(obj, keyChain, value) {
  const keys = keyChain.split("."); // 将属性键链字符串拆分为键数组
  let currentObj = obj;

  // 遍历键数组,逐级访问属性
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (!currentObj.hasOwnProperty(key)) {
      // 如果属性不存在,可以选择在这里进行处理,例如抛出错误或创建新的属性
      return;
    }
    currentObj = currentObj[key];
  }

  // 设置最终属性的值
  const lastKey = keys[keys.length - 1];
  currentObj[lastKey] = value;
}

结语

结束了。

你可能感兴趣的:(前端,ios,前端)