input 输入框问题，输入的光标中的内容自动清空

[lichengtao1989]

1.我在页面上有个倒计时的功能，每一秒都在更新时间，更新时间显示的值（view一直变）
2.我调用input输入框，准备输入内容，每次倒计时秒数变得时候，光标的内容自动全部清空

[F-loat]

<template>
  <div class="container">
    <div class="timer">{{timerstr}}</div>
    <div class="listout">
      <div class="litem" v-for="(item,index) in listary" :key="item">{{item}}</div>
    </div>
    <input type="text" class="inputp" v-bind:value="inputval" @input="inputfn">
    <button @click="send">send</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inputval: '',
      timerstr: 999999999,
      listary: []
    }
  },

  components: {

  },

  methods: {
    inputfn (e) {
      console.log(e.target.value)
      this.inputval = e.target.value
    },
    send () {
      this.listary.push(this.inputval)
      console.log(this.listary)
      this.inputval = ''
    },
    countDown () {
      var that = this
      setTimeout(function () {
        that.timerstr--
        that.countDown()
      }, 1000)
    }
  },

  mounted () {
    this.countDown()
  }
}
</script>

<style scoped>
</style>

[JasonDRZ]

@wo2095296 这个问题只要你将你的计时器抽离成一个组件，并在要使用的页面中进行引用就行了。让定时器的逻辑在定时器所在的组件执行，这样数据就不会影响主页面的数据了。
这是mp组件数据更新机制所致，只有组件化和数据隔离，才能更好的解决，否则你就只有写异步或是向上面 @F-loat 那样进行事件键值绑定达到更新输入值的目的。
事件键值绑定的方式对于简单输入是没有什么问题的，但是在富文本编辑器中进行大量文字编写时就会出现各种由于数据解析性能造成的更新延迟，导致的输入数据和显示数据不统一的问题。

这里说一点，使用MP进行开发时，尽量使用组件化开发方式，这样能大大提高各个组件的执行和数据渲染性能，降低整个页面在JS bridge中的单次数据传输大小，并且能很好的规避类似你这种的数据相互影响的问题。

[sharkdong]

@F-loat 这个解决方式，还是有些问题，当你使用v-model.lazy进行数据绑定时，数据无法输入，或者输入后会被清空的问题，依然会重现，去掉lazy修饰符就正常了，但是去掉lazy修饰符，就会出现的问题#296。关于隔离抽成组件的话，我还在尝试。

[F-loat]

不加 lazy 主要是光标位置的问题吗？下一版就能解决了应该

[sharkdong]

@F-loat 1.0.10发布了，然而光标问题，并没有发现解决😂😂😂

[F-loat]

@sharkdong 这版可以通过 input 事件的处理函数返回一个对象来控制光标位置了

[sharkdong]

@F-loat 你好，能提供一个demo吗？我这边可能代码的问题，但是依然没有控制住光标的位置，使用的是iOS机子测试的

[F-loat]

我没有 ios 的手机所以也没办法测。。如果return 了光标位置还是被刷新掉那这个方法可能就也不行了，不需要设置初始值的话，不进行数据绑定就不会有问题，但是需要动态设置初始值的话就没什么完美的解决办法了

[lanshengzhong]

[mpvue-bot]

issue超过30天无更新或响应，7天后将自动关闭，如果问题状态有更新请及时更新issue