【问题标题】：How to keep carel onInput event in vue.js如何在 vue.js 中保留 carel onInput 事件
【发布时间】：2018-08-14 01:15:32
【问题描述】：

我想为我的组件使用 HTML 的 contenteditable 属性来使区域可编辑。

为此，我使用了@input 指令，但它并没有像我预期的那样工作。我希望插入符号保持整个输入值的末尾，但它会移动到头部位置。

动画 Gif 图片

演示

https://codesandbox.io/s/oj9p82kvp6

代码

<template>
    <div>
        <p contenteditable="true" @input="update">{{ text }}</p>
    </div>
</template>

<script>
    export default {
        name: 'ReadWrite',
            data () {
                return {
                    text: 'edit here!'
                }
            },
        methods: {
            update (e) {
                this.text = e.target.textContent
            }
        }
    }
</script>

<style scoped>
    :read-write {
        border: solid 1px #cccccc;
        padding: 5px;
    }
</style>

【问题讨论】：

这可能对stackoverflow.com/questions/4233265/…有帮助

标签： vue.js vuejs2

【解决方案1】：

所以在检查您的沙盒代码时。

每当您编辑 contenteditable p 标签内的文本时。光标移动到第一个位置。假设您真的不需要总是在底部显示光标，而只是想修复这个怪癖。现在是 2018 年，但还没有一种巧妙的方法来处理这个问题。我解决这个问题的两分钱是使用 focusout 事件。

您可以改用 focusout 指令。

<template>
  <div>
    <p contenteditable="true" @focusout ="update">{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'ReadWrite',
  data () {
    return {
      text: 'edit here!'
    }
  },
  methods: {
    update (e) {
      this.text = e.target.textContent
      console.log(this.text);
    }
  }
}
</script>

看到它在这里工作 https://codesandbox.io/s/0o9qow6zvp

除非您在这里需要双向绑定，否则这应该可以完成工作，而无需大量繁琐的代码，只是为了一些简单的事情

现在该值将绑定到文本变量，并且光标不会在第一个位置移动。因此，jankiness 将消失。

【讨论】：