setData 严重影响 input 的光标
发布于 5 年前 作者 yang98 15761 次浏览 来自 问答

我有一个需求,需要把 input 的输入同时显示在另一个 view 中。

贴个代码片段吧

<view class="classname">
 
 <input value="{{input}}" bindinput="inputHandle" />
 
 {{inputVal}}
view>
Page({
 data: {
   input: 'default val'
 },
 inputHandle (e) {
   const input = e.detail.value
   this.setData({ input })
 },
})

当把光标定位到输入的头部或者中间位置,进行文字的修改输入,这时候输入会不断的重置当前的光标到末尾。

期望,input 组件可以做个处理,当动态设置的默认值和自身的 value 相同,同时当前 input 是 focus 的,就不要去移动它的光标或者不要去暴力赋值。

6 回复
inputHandle (e) {
  const { value, cursor } = e.detail
  const resEv = (cursor !== undefined && cursor !== -1) ? { value, cursor } : undefined
 
  this.setData({ inputVal: value })
 
  //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
  console.log(resEv)
  return resEv
},

@晨

感谢回答,但我这样改写后,返回了一个对象,依然不能正确处理光标的位置。

resEv  的 console 信息如下:

我这input在快速删除输入的时候光标抖动是因为输入监听绑定了setdata吗?

这种可控组件应该类似react,但react不会重置光标位置

怎么解决的,我也遇到这个问题了。

该问题也有遇到,为什么给value做了数据绑定后,手机上输入出现频繁闪动,希望尽快修复

回到顶部