Tiada henti-hentinya saya membahas tentang javascript, karena javascript merupakan salah satu bahasa pemrograman client-side website yang saya sukai dan saya minati, karena kecanggihannya dalam memanipulasi document serta yang lainnya.
Oke dikesempatan kali ini saya akan membahas salah satu kecanggihan dari javascript itu sendiri tentang Cara Membuat Effect Blur Form Input Menggunakan Javascript. Dipembahasan kali ini saya menggunakan sebuah event focus dan blur untuk memanipulasi form input.
Baiklah langsung saja kita mulai mempraktekannya. Pertama-tama jalankan/run text-editornya kemudian ketiklah script HTML dibawah ini :
Masukan Nama Anda: <input type=”text” id=”myInput” onfocus=”focusFunction()” onblur=”blurFunction()”>
Script diatas saya berikan id serta event yang nantinya akan kita manipulasi didalam script javascript. Oke langkah selanjutnya ketiklah kode javascript seperti dibawah ini :
<script>
function focusFunction() {
// Focus = mengembalikan seperti semula dan menampilkan bayangan input
document.getElementById(“myInput”).style.filter = “blur(0px)”;
document.getElementById(“myInput”).style.boxShadow = “2px 2px 2px black”;
}
function blurFunction() {
// No focus = membuat effek blur 1px dan menghilangkan bayangan input
document.getElementById(“myInput”).style.filter = “blur(1px)”;
document.getElementById(“myInput”).style.boxShadow = “0px 0px 0px”;
}
</script>
Script diatas menjelaskan bahwa saat kita klik form input tsb (focus) maka effect yang kita berikan seperty filter dan box shadow akan dijalankan sesuai nilai yang kita inginkan. Dan jika klik diluar dari form input tsb (on blur) maka effect yang berada pada function blur akan dijalankan sesuai nilai yg kita berikan.
Dan hasil dari kedua script diatas akan menjadi seperti pada gambar dibawah ini :
On Focus
On Blur
Cukup mudah ya teman-teman. Jadi seperti itulah tutorial atau contoh sederhana dalam Cara Membuat Effect Blur Form Input Menggunakan Javascript. Dan silahkan teman-teman coba memanipulasi sendiri sesuai keinginan teman-teman.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Effect Blur Form Input Menggunakan Javascript. Semoga dapat sangat bermanfaat buat teman-teman dan sampai bertemu ditutorial selanjutnya.
Terimakasih
The post Cara Membuat Effect Blur Form input Menggunakan Javascript appeared first on Kursus Website Terbaik.