526互联

uniapp微信小程序如何处理input输入空格问题？

发布时间 2023-10-05 18:07:16作者: 迷途小石头

第一种方法用input组件自带的@input事件

使用@input事件 绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空 把处理过的值赋给自己

<input type="text" class="" v-model="certNo" placeholder="请输入您的证书编号" @blur="certNo = certNo.trim().replace(/\s+/g,'')">

第二种方法用函数处理

obj: {
  name: '',//姓名
  cardId: ''//身份证号
},
certNo: '',//证书编号

如果您想支持类似this.trimVal(this, 'obj.name');this.trimVal('certNo')这样只传递属性名的方式，可以对trtNo')方法进行改进，使其可以处理不同类型的参数。

例如，可以增加一个参数context，表示要进行字符串处理的对象（可能是组件实例或其他对象）。同时，还可以通过判断property参数是否包含.符号来确定是直接处理属性，还是需要拆分属性路径后再处理。

示例代码如下：

this.trimVal(this, 'obj.name');
this.trimVal(this, 'certNo');
trimVal(context, property) {
  let obj, propName;
  if (property.includes('.')) {
    // 如果包含.符号，则说明需要处理嵌套属性
    const props = property.split('.');
    propName = props.pop();
    obj = props.reduce((o, p) => o[p], context);
  } else {
    // 否则直接处理对象的属性
    propName = property;
    obj = context;
  }

  // 获取属性值
  let value = obj[propName];
  // 去掉空格
  let newValue = value.trim().replace(' ', '');
  // 赋值给属性
  obj[propName] = newValue;
}

这样就可以同时支持处理嵌套属性和直接处理属性名的情况了。

uniapp微信小程序如何处理input输入空格问题？