收藏
回答

setData 严重影响 input 的光标

问题模块
API和组件


我有一个需求,需要把 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 的,就不要去移动它的光标或者不要去暴力赋值。

最后一次编辑于  2017-08-30
回答关注问题邀请回答
收藏

6 个回答

  • 小童。
    小童。
    2018-03-13

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

    2018-03-13
    赞同
    回复
  • 海伟
    海伟
    2017-12-14

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

    2017-12-14
    赞同
    回复
  • 我不怂,只是谨慎
    我不怂,只是谨慎
    2017-11-13

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

    2017-11-13
    赞同
    回复
  • 云帆
    云帆
    2017-08-30

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

    2017-08-30
    赞同
    回复
  • 不爱吃西红柿的鱼
    不爱吃西红柿的鱼
    2017-08-30
    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 信息如下:


    2017-08-30
    赞同
    回复
  • 晨
    2017-08-30


    2017-08-30
    赞同
    回复 1
    • 我想换昵称
      我想换昵称
      2018-06-12

      之前我才用此方法解决了这个问题,也正常了很长时间。。。。

      但是今天又发现问题了。。。


      我的需求是  在input中输入的如果是小写字母,则要转换成大写的渲染出来,用 return {value: ''} 解决了

      但是今天又发现在安卓上如果输入新的内容的时候,会导致input中全部的内容闪一下,然后就又无解了。。。。


      为什么 input 的问题这么多哦。。。。


      2018-06-12
      回复