📋

VueJSで@paste時にペーストされたデータを取得できない

2022/02/05に公開約600字

前提

VueJSでtextareaにペーストされた時のイベントを取得するには

<template>
	<textarea @paste="hoge"></textarea>
</template>
<script>
export default {
	methods: {
		hoge(){
			console.log("ペーストされました")
		}
	}
}
</script>

と書きますが、このコードではぺースト時にペーストされた文字を取得することができません。
また、

<template>
	<textarea @paste="hoge"></textarea>
</template>
<script>
export default {
	methods: {
		hoge(text){
			console.log("ペーストされました:" + text)
		}
	}
}
</script>

と書いても

[object ClipboardEvent]

と返されます。

修正方法

//methods内
hoge(){
	const pasted = event.clipboardData.getData('text');
	console.log(pasted)
}

これでうまく動きます。

(S.kuronosuke)

Discussion

ログインするとコメントできます