Vuetify の v-text-field にフォーカスしたとき、入力済み文字を全選択状態にする方法。
環境
- Windows 11 Home 21H2
- Vue 2.6.14
- Vuetify 2.6.0
コード
<template>
<v-container>
<v-row>
<v-col cols="2">
<v-text-field
v-model="title"
label="Regular"
@focus="textFieldFocused"
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
title: "Preliminary report",
}),
methods: {
textFieldFocused(focusEvent) {
focusEvent.target.select();
},
},
};
</script>
実行
テキストフィールドをマウスクリックしたら、文字が全選択されるようになります。
