vue.js - Vuejs 阻止在 contenteditable 中添加新行

Question

如何防止 enter 在 contenteditable div 中添加新行。我试过 @keyup.enter.prevent 但它不起作用。也试过 @keyup.enter.prevent & @keyup.enter.stop.prevent 但没有成功。

Answer 1

您需要 keydown，当您到达 keyup 事件时，浏览器已经将您按下的任何键插入到输入中。

new Vue({
  el: "#app",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div contenteditable="true" @keydown.enter.prevent>edit me</div>
</div>