mountedから特定のクラスを持つボタンに対してtabindex=-1を付与したらできる
成果物
このサイトを参考に作った。
https://reffect.co.jp/vue/vuetify-first-time
この目のアイコンはtabキーを押したときに飛ばされるようにする
結論
mounted() {
const elements = document.getElementsByClassName('tabindexから除外したいクラス名');
elements[0].tabIndex = -1;
elements[1].tabIndex = -1;
},
解説
フォームのコード
<v-form ref="test_form">
<v-text-field v-model="postData.email" prepend-icon="mdi-at" label="メールアドレス"
:rules="[rules.required,rules.email]" />
<v-text-field v-model="postData.password" v-bind:type="showPassword ? 'text' : 'password'"
prepend-icon="mdi-lock" v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
label="パスワード" required :rules="[rules.required,rules.password]"
@click:append="showPassword = !showPassword" />
<v-text-field v-model="postData.passwordConfirm"
v-bind:type="showPasswordConfirm ? 'text' : 'password'" prepend-icon="mdi-lock"
v-bind:append-icon="showPasswordConfirm ? 'mdi-eye' : 'mdi-eye-off'" label="パスワード再入力"
required
:rules="[rules.required,rules.password,(postData.password === postData.passwordConfirm) || 'パスワードが一致しません。']"
@click:append="showPasswordConfirm = !showPasswordConfirm" />
<v-btn class="info" @click="submit">新規登録</v-btn>
</v-form>
詳しくは上記のサイトを見てくれ。
フォーム自体 にこの後何か手を加えることはない。
mounted
mounted() {
const elements = document.getElementsByClassName('v-icon--link');
elements[0].tabIndex = -1;
elements[1].tabIndex = -1;
},
これでできる。
今回は、パスワードを表示する目のアイコンがコンパイル後には「v-icon--link」というクラスを持つbuttonになっていた。
なので、それを対象にjavascriptで動的にtabindex=”-1”
を付与したかんじ。