コミートム合同会社

コミートム合同会社

Vueでキー入力、貼り付けのイベントを検知する

Vue textarea keydown paste To detect key input and paste events in a text area in Vue, add keydown and paste to the textarea tag and set the function you want to call when a key input or paste is performed.
by JanitorSep 24, 2023
Vueでテキストエリアへのキー入力、貼り付けのイベントを検知する方法です。textareaタグに@keydown、@pasteを追加するだけでとても簡単にできます。

Jump Links

1. textareaに@keydown, @pasteを追加する
2. 動作確認
3. おわりに
1. textareaに@keydown, @pasteを追加する
下記のようなソースコードで動きを確認できます。
<script setup> var userInput = reactive( { value: "" } ); var onKeyDown = ( $event ) => { console.log( "onKeyDown IN!" ); } var onPaste = ( $event ) => { console.log( "onPaste IN!" ); } </script> <template> <div class="pa-3"> <textarea v-model="userInput.value" @keydown="onKeyDown" @paste="onPaste" style="border-style: solid;"> </textarea> </div> <div class="pa-3"> {{ userInput.value }} </div> </template> <style> </style>
textareaに@keydownと@pasteを追加してキー入力が行われたとき、ペーストが行われたときに呼び出したい関数を設定します。上記のソースコードの場合は、onKeyDown、onPasteが呼ばれます。
2. 動作確認
下の図のように、textareaへキー入力、ペーストしたときに、開発者ツールのコンソールに出力されます。
3. おわりに
Vueは本当に面倒なところが無くて便利ですね。

Editors pick

Our other articles
© 2023 - Comytom LLC