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を追加するだけでとても簡単にできます。
Vueでテキストエリアへのキー入力、貼り付けのイベントを検知する方法です。textareaタグに@keydown、@pasteを追加するだけでとても簡単にできます。
Jump Links
1. textareaに@keydown, @pasteを追加する
2. 動作確認
3. おわりに
1. textareaに@keydown, @pasteを追加する
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>
<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が呼ばれます。
textareaに@keydownと@pasteを追加してキー入力が行われたとき、ペーストが行われたときに呼び出したい関数を設定します。上記のソースコードの場合は、onKeyDown、onPasteが呼ばれます。
2. 動作確認
2. 動作確認
下の図のように、textareaへキー入力、ペーストしたときに、開発者ツールのコンソールに出力されます。
下の図のように、textareaへキー入力、ペーストしたときに、開発者ツールのコンソールに出力されます。
3. おわりに
3. おわりに
Vueは本当に面倒なところが無くて便利ですね。
Vueは本当に面倒なところが無くて便利ですね。
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を追加するだけでとても簡単にできます。
Vueでテキストエリアへのキー入力、貼り付けのイベントを検知する方法です。textareaタグに@keydown、@pasteを追加するだけでとても簡単にできます。
Jump Links
1. textareaに@keydown, @pasteを追加する
2. 動作確認
3. おわりに
1. textareaに@keydown, @pasteを追加する
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>
<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が呼ばれます。
textareaに@keydownと@pasteを追加してキー入力が行われたとき、ペーストが行われたときに呼び出したい関数を設定します。上記のソースコードの場合は、onKeyDown、onPasteが呼ばれます。
2. 動作確認
2. 動作確認
下の図のように、textareaへキー入力、ペーストしたときに、開発者ツールのコンソールに出力されます。
下の図のように、textareaへキー入力、ペーストしたときに、開発者ツールのコンソールに出力されます。
3. おわりに
3. おわりに
Vueは本当に面倒なところが無くて便利ですね。
Vueは本当に面倒なところが無くて便利ですね。