#简言
在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;
}
结语
结束了。