如何在vue.js中保持carel onInput事件

Question

我想为组件使用HTML的<article> <section>100 x 50</section> <section>100 x 50</section> <section>100 x 50</section> <section>100 x 50</section> <section><b>70</b>&nbsp;x 50</section> </article>属性，以使区域可编辑。

为此，我使用@input指令，但它没有按我预期的那样工作。 我希望插入符号可以保留整个输入值的结尾，但它会移到头部位置。

动画Gif图片

演示

https://codesandbox.io/s/oj9p82kvp6

代码

contenteditable

Answer 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

除非您需要在此处进行双向绑定，否则只需简单的操作就可以完成工作，而无需使用大量复杂的代码

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