小程序mpvue中input和textarea使用v-model绑定时,当删除或改变数据时,光标自动跑到最后

发布于 2022-09-07 03:25:35 字数 539 浏览 16 评论 0

1.在mpvue小程序中,当我在textarea标签中,使用v-model绑定数据时,当要修改里面的数据时(比如删除一段话中间的几个字),当我将光标移动到要删除的位置,第一次点击删除时,光标会自动回到段落的尾部, input标签也是这样的问题。
2.在使用v-model.lazy的时候,这个问题虽然解决了,但是,当我填完表单,点击提交的时候,数据并没有传给后台,看了下mpvue文档,v-model.lazy虽然在vue中属于change事件,但是mpvue中,会将change事件自动转换成blur事件,所以,只有输入框表单失去焦点时,才会绑定数据,而当没有失去焦点时,直接点击提交按钮,数据并没有绑定,所以没有提交到后台。

终上所述:谁能给一个比较好的解决办法,既可以让光标正常,也可以能立刻绑定传到后台?

目前的解决方案: 是在点击提交按钮时,给一个提示框,但是客户不满意,需要非阻塞提交,无感提交,直接提交到后台。麻烦大家给一个好一点的方案,谢谢!

使用的设备是:iPhone6s 系统是IOS11.3,微信版本是6.6.6

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

节枝 2022-09-14 03:25:35

目前解决了,使用lazy修饰符有个缺点,就是lazy修饰符会被Vue编译成change事件,而mpvue会把change事件转换成blur事件,也就是当光标移动开时,才开始绑定数据值。所以这样会导致,如果用户输入了最后一个输入框(使用lazy修饰符的),没有将光标移开,而是直接点击提交,则最后一个提交会被忽略,看了下底层源码,是由于blur事件触发在点击提交之后,比较慢,所以导致这样的原因,目前的解决方案是:
1、使用lazy修饰符,即v-model.lazy进行数据绑定。
2、在进行数据传输或调用接口,或者提交的时候,做一个延时,使用setTimeout大概延时个100毫秒
优点:这样的话,数据绑定的时候,光标不会闪烁,同时,在删除时,光标不会自动回到最后,也解决了提交blur时间太慢的问题。
缺点:就算是使用了v-model.lazy,当遇到定时器进行实时修改数据时,会出现一定的bug

淡淡绿茶香 2022-09-14 03:25:35

你给提交按钮添加一个逻辑,手动blur输入框?

雅心素梦 2022-09-14 03:25:35

mpvue文档原链第3条里提到
合理使用双向绑定建议使用 v-model.lazy 绑定方式以优化性能,此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。

所以使用v-model.lazy就可以解决你说的光标不正常的情况。

vue文档里的解释:
.lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文