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

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

阅读 21k
3 个回答

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏