onFocus dan onBlur sebagai Pemandu User dalam JavaScript

1155

onFocus adalah event textbox yang akan dipicu ketika mouse di klik di dalam textbox, dan onBlur merupakan kebalikan dari onFocus yaitu onBlur ini akan dipicu ketika mouse di klik di bagian luar textbox itu.

Pasangan onFocus dan onBlur salah satunya digunakan sebagai pemandu user, contohnya seperti terlihat pada isian bagian comment di bawah. Ketika mouse di klik di dalam textbox tulisan ‘http://’ atau ‘Write comment here…’ akan hilang, ketika  mouse di klik di bagian luar textbox dan kita tidak menuliskan sensuatu, tulisan tersebut akan muncul kembali.

Berikut adalah contoh penggunaan onFocus dan onBlur dalam JavaScript:

//<js

<html>

<head>

<title>onFocus dan onBlur textBox Event</title>

<script type=”text/javascript”>

var text =’tuliskan sensuatu disini’;

window.onload =function (){

//inisialisai awal textbox

document.getElementById(‘my-textbox’).value =text; //text/tulisan

document.getElementById(‘my-textbox’).style.color =”#666666″; //color text

}

function tbFocus(textbox){

if(textbox.value == text){

textbox.value =””;

textbox.style.color=”#000000″;

}

//untuk menampilkan texbox event onfocus

document.getElementById(‘tbEvent’).innerHTML =’textbox event: <strong>onFocus</strong>’;

}

function tbBlur(textbox){

if(textbox.value == “”){

textbox.value =text;

textbox.style.color=”#666666″;

}

//untuk menampilkan texbox event onblur

document.getElementById(‘tbEvent’).innerHTML =’textbox event: <strong>onBlur</strong>’;

}

</script>

</head>

<body>

<h2>onFocus dan onBlur</h2>

<p>

<input type=”text” name=”my-textbox” id=”my-textbox” size=”40″ value=”” onFocus=”javascript:tbFocus(this)” onBlur=”javascript:tbBlur(this)” style=”color:#000000″ />

</p>

<p id=”tbEvent”>textbox event</p>

</body>

</html>

//&gt;js

Nah, natinya skrip di atas akan terlihat seperti ini.

–Selamat Mencoba–

  • wahh, sekali lagi web ini membantu saya.. thanks yaa..

  • Bermanfaat 🙂