Vue: how to make textarea didn't change line ...

Created on 15 Feb 2017  ·  3Comments  ·  Source: vuejs/vue

https://jsfiddle.net/wangmin/rdjjpc7a/1628/
in this demo,when i click enter
i used e.stopPropagation() and e.preventDefault()
but it not work
it will change a new line
i do not want that
how to avoid ...
thank u

Most helpful comment

There are several things wrong with your example:

Instead of @keyup.onEnter="update", you have to call @keyup.enter="onEnter", because the name of your method is onEnter, not update, and the name of the modifier is enter, not onEnter.

Second: The newline is put into the textarea on keydown, not on keyup, so the complete code should be:

<div id="editor">
  <textarea :value="input" @keydown.enter="onEnter"></textarea>
</div>

Here is an updated fiddle: https://jsfiddle.net/tedt89kv/


Also, keep in mind that your users may Copy and Paste text with newlines into your document. Maybe a Watcher would be more what you want. In the watcher, you could remove all newlines on every change of the textarea's value.

All 3 comments

There are several things wrong with your example:

Instead of @keyup.onEnter="update", you have to call @keyup.enter="onEnter", because the name of your method is onEnter, not update, and the name of the modifier is enter, not onEnter.

Second: The newline is put into the textarea on keydown, not on keyup, so the complete code should be:

<div id="editor">
  <textarea :value="input" @keydown.enter="onEnter"></textarea>
</div>

Here is an updated fiddle: https://jsfiddle.net/tedt89kv/


Also, keep in mind that your users may Copy and Paste text with newlines into your document. Maybe a Watcher would be more what you want. In the watcher, you could remove all newlines on every change of the textarea's value.

Also, from the issue template that you removed to post your question:

The issue list of this repo is exclusively for bug reports and feature requests. For simple questions, please use the following resources:

thank u ... i will think more next time

Was this page helpful?
0 / 5 - 0 ratings

Related issues

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comments

robertleeplummerjr picture robertleeplummerjr  ·  3Comments

bfis picture bfis  ·  3Comments

6pm picture 6pm  ·  3Comments

aviggngyv picture aviggngyv  ·  3Comments