请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
286
帖子
2
勋章
7万+
Y币

[多端开发] 关于监听input值,然后改变的问题

[复制链接]
发表于 2021-3-22 17:23:39
有这么一个需求,我想不然用户在input 里面输入中文,那么,在vue 里面可以使用watch,但是在avm里面没有,所以我想到了用oninput 来监听输入的内容

但是发现一个问题,使用了v-model 的时候吧,oninput 改变的值,会在第二次输入的时候吧内容给替换掉,第一次是不会替换的

使用value 这个属性吧, 从代码打印到控制台来看,内容是空,但是,input 里面还是有文字的,不知道是啥原因造成的,麻烦大佬给看下
页面代码
  1.   <input type="text" class="flex-1 height-100p fz15 font-r margin-left-38" placeholder="请输入2-20个字符" value={this.data.nikeName} oninput={this.watchContent}>
复制代码


js代码
  1. watchContent:function(e){
  2.         let str = e.detail.value.replace(/[^a-zA-Z\s*]/g, '');
  3.         this.data.nikeName = str;
  4.       },
复制代码


10
帖子
1
勋章
5638
Y币
测试发现,replace后面是空格的的确有问题。

  1.   let str = e.detail.value.replace(/[^a-zA-Z\s*]/g, '');
复制代码


如果是改成其他字符就没有问题
  1.   let str = e.detail.value.replace(/[^a-zA-Z\s*]/g, '*');
复制代码



猜测是因为value变短了引发更新异常,已反馈。
286
帖子
2
勋章
7万+
Y币
杨永安 发表于 2021-3-23 15:58
测试发现,replace后面是空格的的确有问题。

谢谢大佬
20
帖子
1
勋章
7559
Y币
本帖最后由 常山赵子云 于 2021-11-9 17:23 编辑

把最后一个字符替换成“空”,然后赋值给nikeName,此时的nikeName实际上是没有发生变化的,也就是data未发生变化,不会触发组件的更新,无法将结果重新设置给原生。用其他字符替换数字则没问题,因为替换完后,nikeName发生变化了,会触发data更新,从而反馈到原生。
解决方式有两个:
1、在 this.data.nikeName = str;后主动调this.update();强行刷新当前组件
2、使用v-model绑定input的操作

3、 云编译3.0.19版本引擎起,oninput 事件在APP端支持 返回一个字符串,该字符串将用于替换输入框的内容,如果不返回值则无变化。
您需要登录后才可以回帖 登录

本版积分规则