Cara Membuat Effect Blur Form input Menggunakan Javascript
Tiada henti-hentinya saya membahas mengenai javascript, karena javascript adalah sebuah diantara bahasa pemrograman client-side situs yang saya sukai dan saya minati, karena kecanggihannya pada memanipulasi document serta yang lainnya.
Oke dikesempatan kali ini saya akan membahas diantara kecanggihan dari javascript itu sendiri mengenai Cara Membangun Effect Blur Form Input Menggunakan Javascript. Dipembahasan kali ini saya menggunakan sebuah event focus dan blur bagi memanipulasi form input.
Baiklah seketika saja kita mulai mempraktekannya. Pertama-tama-tama jalankan/run text-editornya kemudian ketiklah script HTML dibawah ini :
Masukan Nama Sahabat: <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 berikutnya 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 = merancang 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 dikala kita klik form input tsb (focus) karenanya effect yang kita berikan seperty filter dan box shadow akan dijalankan sesuai nilai yang kita inginkan. Dan seandainya klik diluar dari form input tsb (on blur) karenanya effect yang berada di function blur akan dijalankan sesuai nilai yg kita berikan.
Dan hasil dari kedua script diatas akan menjadi seperti di gambar dibawah ini :
On Focus
On Blur
Lumayan gampang ya teman-teman. Jadi seperti seperti itulah panduan atau contoh sederhana pada Cara Membangun Effect Blur Form Input Menggunakan Javascript. Dan silahkan teman-teman coba memanipulasi sendiri sesuai keinginan teman-teman.
Oke kalau seperti itu lumayan demikianlah pembahasan kali ini mengenai Cara Membangun Effect Blur Form Input Menggunakan Javascript. Semoga dapat amat bermanfaat bikin teman-teman dan hingga bertemu ditutorial berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
