Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone
Halo teman-teman di panduan kali ini saya akan menjelaskan Cara Membangun Spasi Otomatis Bagi Input Nomor Handphone, bagi merancang Spasi Otomatis Input Nomor Handphone disini kita menggunakan sebuah tag HTML yaitu <input type=”text”> nah bagi merancang spasi otomatisnya kita menggunakan bantuan javascript, seperti yang kita ketahui bahwa input type text sangat banyak digunakan, dan input type text ini pun dapat kita gunakan bagi input text, number, email dan masih banyak lagi.
Guna dari Spasi Otomatis Bagi Input Nomor Handphone ini yaitu mempermudah kita pada menginput nomor pada sebuah form dengan menggunakan sebuah spasi ynag terdapat di form tersebut, dan terkadang kita suka bingung dan menghitung jumlah nomor atau angka yang telah kita input, nah bagi mempermudah kita pada menginput nomor hp pada sebuah form kita menggunakan sebuah spasi otomatis yang terdapat di form tersebut.
Oke teman-teman tanpa berlama-lama lagi kita seketika saja masuk ke study casenya mengenai Cara Membangun Spasi Otomatis Bagi Input Nomor Handphone, bagi merancang spasi otomatis ini teman-teman dapat mengikuti step by step yang terdapat dibawah ini.
Langkah pertma kita akan merancang file index selaku halaman utmannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!DOCTYPE html>
<html >
<head>
<meta charset=UTF-8>
<title>Cara Membangun Spasi Otomatis Bagi Input Nomor Handphone </title>
<link rel=stylesheet href=style.css>
</head>
<body>
<form action=>
<label for=>Silahkan Masukan Nomor</label>
<input id=cc type=text placeholder=1234 5678 9010/>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js'></script>
<script src=index.js></script>
</body>
</html>
Berikutnya kita akan merancang style nya bagi mengatur tampilan dari form yang kita bikin, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
body{font-family: arial}
input[type=text] {
border: 0;
border-bottom: 2px solid #bbb;
color: #bbb;
padding: 8px 0;
width: 100%;
max-width: 15em;
font-size: 20px;
text-align: center;
}
input[type=text]:focus {
color: #3719e9;
border-color: #3377d6;
outline: 0;
}Berikutnya yang terakhir kita akan merancang file bagi java script nya, teman-teman dapat simpan script yang terdapat dibawah ini dengan nama index.js
$('#cc').inputmask(9999 9999 9999)Di file java script diatas terdapat script “$(‘#cc’).inputmask(“9999 9999 9999”)” teman-teman dapat menambahkan jumlah karakter angka sesuai yang teman-teman inginkan, atau teman-teman dapat menggunakan tanda “ – “ selaku pembatasnya.
Bagi menjalankan script diatas silahkan teman-teman save seluruh filenya dan silahkan buka di browsernya karenanya akan terlihat hasilnya seperti dibawah ini.
Bagaimana teman-teman lumayan gampang bukan Cara Membangun Spasi Otomatis Bagi Input Nomor Handphone-nya, demikianlah dulu panduan saya kali ini mengenai Cara Membangun Spasi Otomatis Bagi Input Nomor Handphone.
Semoga bermafaat
Terimakasih.
Sumber https://kursuswebsite.org
