Hilangkan nilai awal textbox menggunakan jQuery
Sudah lama aku tidak berkongsi sesuatu di sini. Kali ini aku ingin kongsikan bagaimana membuat nilai awal pada textbox hilang. Sila rujuk gambar di bawah ehehehe.
Langkah pertama semestinya muatturun jquery dari sini. Selepas itu perlulah memasukkan fail jquery ini kedalam kod html kita.
<script src="jquery-1.6.min.js"></script>
Kemudian kita tambah pula kod ini kepada fail html kita.
<script type="text/javascript">
$().ready(function(){
$(".clearMe").focus(function(){
if ($(this).val() == this.defaultValue)
{
$(this).val("");
$(this).removeClass('greyText');
}
});
});
</script>
Sekarang mari kita berbicara mengenai kod diatas. $(document).ready mempunyai fungsi yang sama dengan <body onload=”nama fungsi”>. $(“.clearMe”).focus pula merupakan fungsi didalam jQuery yang menyerupai onFocus. Fungsi akan dipanggil apabila kita klik atau fokus pada elemen yang mempunyai kelas (class) clearMe.
Ini merupakan bahagian yang sangat penting. if ($(this).val() == this.defaultValue).
$(this).val() adalah fungsi dalam jQuery. Fungsi ini akan membaca nilai yang terdapat didalam elemen yang sedang difokus. Manakala this.defaultValue adalah fungsi yang terdapat didalam javascript. Ia bukanlah sebahagian dari fungsi jQuery. this.defaultValue ini akan sentiasa membaca nilai awal yang telah ditetapkan oleh kita.
Apa yang dilakukan oleh baris ini ialah, ianya akan akan membandingkan nilai semasa dari jQuery dengan nilai awal yang dibaca oleh javascript. Sekiranya tidak sama kod yang terdapat didalamkan akan dilaksanakan.
$(this).val(“”) akan mengumpukkan nilai ruang kosong kepada elemen tadi manakala $(this).removeClass(“greyText”) akan membuang kelas greyText dari ada pada elemen kita. Ini bagi membolehkan apa yang ditaip oleh pengguna, tidak akan berwarna kelabu.
Berikut merupakan kod penuh untuk fungsi ini.
<html>
<head>
<title>Kosongkan Textbox</title>
<script src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$(".clearMe").focus(function(){
if ($(this).val() == this.defaultValue)
{
$(this).val("");
$(this).removeClass('greyText');
}
});
$(".clearMe").blur(function(){
if ($(this).val() == "")
{
$(this).val(this.defaultValue);
$(this).addClass('greyText');
}
});
});
</script>
</head>
<body>
<style>
.greyText {
color:grey;
}
</style>
<form>
<label>Masukkan Nama</label> <input type="text" value="Jasdy Syarman" />
<input type="button" value="Send" />
</form>
</body>
</html>
Maaf sekiranya code ini tidak disusun dengan baik. Aku hanya tampal dari notepad++ dan wordpress membuang semua ruang kosong yang tiada ehehehehe.
Kebanyakan kod yang ada menggunakan perbandingan dengan atribut title. Aku tidak ingin menambah panjang kod yang perlu ditaip pada form. Makanya aku menyediakan kod ini.
Selamat mencuba!
About The Author
aku_tak_tau
Add a Comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Abg jasy.. Sy tgh mencube dengan penuh dedikasi ni.. Yoshh
sila sila…risiko ditangan anda ahahahaha
Alamak.. Aku slalu taip kurang character.. Eja nama ko pun salah.. Hahaha
ahahaha aku tau la domain name aku takde .my mcm ko punya ahahaha
Saya suka. Komen dah jadik tangga. yea! bwahahahaha..
takde keje la nih 😛
skarang dah attribute namanya ‘placeholder’ dah… action same seperti yang dimaksudkan di topik ini.
nih script beberapa tahun lepas