JavaScript İle Input Value Değerlerini Düzenlemek
Merhaba Arkadaşlar,
Bu makale de sizlere javascript dili ile inline olarak yazım yapılarak form içerisindeki yazı girişlerine ayrılmış olan alanların value değerleri ile ilgili düzenlemelerin nasıl yapılacağını anlatacağım. Yeni teknolojiler ile ” placeholder ” yolu ile yaptığımız bu işlemden kısaca bahsetmek gerekirse;
Her text alanının başına genelde ” Kullanıcı Adı : ” , ” Parola : ” gibi yazılar yazarak bu alanlara ne için giriş yapılacağını belirtiyoruz. Ancak şimdi yapacağımız uygulama sayesinde aynı placeholder ile yaptığımız gibi text alanlarının başında bulunan yazıları text alanının içerisine alacağız ve yazı girişi için bu alan seçildiği anda bu yazıları sileceğiz. Uygulamamıza geçelim.
İlk olarak bir sayfa yaratıyoruz ve ismini ” index.html ” olarak belirliyoruz. Daha sonra sayfa içeriğini açarak HTML kodlarımızla birlikte bir adet form oluşturuyoruz. Formumuzun içeriğinde ” Ad & Soyad , Mail Adresi , Konu , Mesaj ” için gerekli text alanları yaratılacak. HTML sayfa içeriğimiz şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - JavaScript Uygulaması</title>
</head>
<body>
<form method="post" action="">
<input type="text" name="KullaniciAdi" value="ASD" />
<br />
<input type="text" name="EmailAdresi" />
<br />
<input type="text" name="Konu" />
<br />
<textarea rows="10" cols="16" name="Mesaj"></textarea>
</form>
</body>
</html>
Bu şekildeki bir kodu çalıştırdığımızda alt alta sıralanmış 4 adet text alanı göreceğiz. Ancak bizim istediğimiz şey bu text alanlarının içerisinde kullanıcının her birini neye göre doldurması gerektiğini yazmasıdır. Bunun için her birinin içerisine bir value değeri oluşturarak gerekli yazıları yazıyoruz. Mesaj bölümümüzün geleceği textarea içerisine ise direkt olarak tag’ ler arasına yazarak bir işlem gerçekleştiriyoruz. HTML sayfamızın bu aşamadaki hali şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - JavaScript Uygulaması</title>
</head>
<body>
<form method="post" action="">
<input type="text" name="KullaniciAdi" value="Adı Soyadı" />
<br />
<input type="text" name="EmailAdresi" value="E-Mail Adresi" />
<br />
<input type="text" name="Konu" value="Konu" />
<br />
<textarea rows="10" cols="16" name="Mesaj">Mesaj</textarea>
</form>
</body>
</html>
Bu şekildeki kodlarımızı çalıştırıp Browser üzerinden test ettiğimizde ise içeriğinde tam da istediğimiz gibi yazıların yazdığını fakat tıklama anında text alanı içeriğinin boş olmadığını , yazının aynı şekilde kaldığını görüyoruz. Bu sorunu gidermek için ise bir kaç kısa JavaScript kodu kullanacağız. Önce kodları yazalım daha sonra da bu kodların ne anlama geldiğini ayrıntılı olarak açıklayalım.
<html>
<head>
<title>BilgiSayaci.Org - JavaScript Uygulaması</title>
</head>
<body>
<form method="post" action="">
<input type="text" name="KullaniciAdi" value="Adı Soyadı" onFocus="if(this.value==this.defaultValue) this.value='';" onBlur="if(this.value=='') this.value=this.defaultValue;" />
<br />
<input type="text" name="EmailAdresi" value="E-Mail Adresi" onFocus="if(this.value==this.defaultValue) this.value='';" onBlur="if(this.value=='') this.value=this.defaultValue;" />
<br />
<input type="text" name="Konu" value="Konu" onFocus="if(this.value==this.defaultValue) this.value='';" onBlur="if(this.value=='') this.value=this.defaultValue;" />
<br />
<textarea rows="10" cols="16" name="Mesaj" onFocus="if(this.value==this.defaultValue) this.value='';" onBlur="if(this.value=='') this.value=this.defaultValue;">Mesaj</textarea>
</form>
</body>
</html>
JavaScript kodlarımızı açıklamak gerekirse
onFocus="if(this.value==this.defaultValue) this.value='';"
Bir üst satırda belirttiğimiz kod bloğu , etki ettiği text alanının seçili olması halinde işleme girmektedir. Bir if döngüsü içerisinde seçili olan nesnenin value değerinin html içerisinde belirttiğimiz değere eşit olması halinde text alanı içeriğinin boşaltılmasını sağlamaktadır.
onBlur="if(this.value=='') this.value=this.defaultValue;"
Bu kod ise seçili durumda olan text alanından çıkılması , farklı bir nesnenin üzerine yoğunlaşılması halinde harekete geçmektedir. Bir if döngüsü halinde içerisine etki ettiği text alanının boş bırakılması halinde html içerisinde belirtilen Value değerinin tekrar bu text alanına yazılması gerektiğini belirtmektedir.
Tüm Yorumlar