Dalam kesempatan kali ini kita akan belajar bagaimana Cara Membuat Auto Tab Dengan VueJs . Auto Tab disini berkaitan dengan form input. Jadi saat pada inputan pertama sudah disi maka akan secara otomatis pindah ke inputan selanjutnya. Bagaimana cara membuatnya yuk jangan kemana-mana terus simak pembahasannya.
Langkah pertama
Sahabat coba buka text editor lalu buat file html lalu ketikkan code dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<body>
<div class="container">
<div id="app">
<button @click="num++">Tambah inputan</button>
<p>Silahkan Isi <i>[Max 8 karakter]</i></p>
<ul>
<li v-for="(key, index) in lists" :key="`input${index}`">
<input type="text"
ref="input_item"
class="input-items"
@keyup="autoTab($refs.input_item[index], 8, $event)"
maxLength="8"
@keydown.prevent.tab.exact="moveNext"
@keydown.prevent.shift.tab="movePrev"
@keydown.prevent.down="moveNext"
@keydown.prevent.up="movePrev">
<button>button</button>
</li>
</ul>
</div>
</div>
pada code diatas terdapat button dan inputan yang berada didalam ul li, fungsi button disini untuk menambahkan inputan yang nanti setiap form yang ditambahkan akan menjadi list-list inputan. Saat mengisi inputan hanya dibatasi 8 karakter saja,jika lebih maka akan otomatis pindah ke inputan selanjutnya.
Langkah Kedua
Selanjutnya tambahkan code dari javascript-nya seperti dibawah ini:
<script>
new Vue({
data () {
return {
num: 2
}
},
computed: {
lists () {
return Array.from(Array(this.num).keys())
},
elements () {
return document.getElementsByClassName('input-items')
}
},
methods: {
autoTab(input,len, e) {
var vm = this;
const index = vm.findIndex(e.target)
if(input.value.length >= len) {
vm.moveFocus(index + 1)
}
},
findIndex (target) {
return [].findIndex.call(this.elements, e => e === target)
},
moveFocus (index) {
if (this.elements[index]) {
this.elements[index].focus()
}
},
moveNext (event) {
const index = this.findIndex(event.target)
this.moveFocus(index + 1)
},
movePrev (event) {
const index = this.findIndex(event.target)
this.moveFocus(index - 1)
}
}
}).$mount('#app')
</script>
Baiklah sekarang simpan semua code diatas lalu jalankan pada browser, sahabat langsung saja coba lakukan inputan jika benar lebih dari 8 karakter maka akan pindah ke inputan selanjutnya.
Saya kira cukup dalam pembahasan artikel kali ini tentang Cara Membuat Auto Tab Dengan VueJs. Semoga bermanfaat dan selamat mencoba.
terima kasih