Cara menggunakan on blur focus javascript

Pada tutorial ini saya akan mengajarkan bagaimana menerapkan even jQuery pada Form. Akan terlihat efek ketika anda melakukan klik atau focus makan background form input akan berubah warna. Even blur akan mengembalikan posisi warna. Berikut tutorialnya :

Table of Contents Show

Definition and Usage
Technical Details
Browser Support
Related posts:
Post navigation

1. Buat form pada halaman html

2. simpan halaman diatas. kemudian ketikkan script berikut :

3. Simpan dan jalankan pada browser .

Baca juga Membuat-Slide-Panel-dengan-Jquery

No data.

Event onblur adalah event yang terjadi ketika sebuah elemen kehilangan fokus. Event ini banyak digunakan pada sebuah form untuk melakukan validasi input. Source code berikut akan menampilkan alert ketika elemen input kehilangan fokus.

Example

Call a function when a user leaves an input field:

Try it Yourself »

Definition and Usage

The onblur event occurs when an HTML element loses focus.

The onblur event is often used on input fields.

The onblur event is often used with form validation (when the user leaves a form field).

Syntax

In JavaScript, using the addEventListener() method:

object.addEventListener("blur", myScript);

Try it Yourself »

Technical Details

Bubbles:NoCancelable:NoEvent type:FocusEventHTML tags:ALL HTML elements, EXCEPT:, ,
, , ,,,,Try it Yourself »

Example

Event delegation: using focusin and focusout events:

Try it Yourself »

Browser Support

onblur is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYes9-11

Belajar jQuery Focus dan Blur

September 19, 2018 Putra Belajar Web Design

Halo Sobat Webhozz, Kali ini kita akan mempelajari Efek Jquery Focus & Blur. Berikut langkahnya.

Pertama kita membuat koneksi html ke jquery, seperti ini

<!DOCTYPE html>
<html>
<head>
<title>Latihan jquery</title>
<script src="jquery-3.3.1.min.js"></script>

Lalu langkah kedua kita kasih perintah jquery berubah warna di form kita, seperti ini.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    <!--$("input") itu berhubungan dengan input yang ada di body untuk merubah warna form dan focus dan blur perintah mewarnai formnya.-->
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>
</head>

Langkah Ketiga kita Membuat formnya di dalam body.

<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"><br>

</body>
</html>

Ini dia Hasilya.

Gimana sangat mudah kan!,
Sekian dari kami, Semoga Bermanfaat bagi sobat webhozz.

Tutorial Dasar JQUERY Menggunakan Fungsi Event Click()

Belajar Jqueryjquery effect focus blurjquery focus blur

Previous Post:Membuat Efek Hide dan Show dengan JQuery

Next Post:Kursus Android Advance Oktober 2018 Cabang Jakarta Timur

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 :

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.