Input Gölge Yazı Ekleme JavaScript Kodu

Input içerisine Java Script kodu kllanarak geçici bir yazı yazdırma, input içine tıklandığında görünen demo yazı kaybolacak, kullanıcı tarafından yazılan yazı görünecek, kullanıcı yazısını sildiğinde tekrar demo yazımız. Örneğimizde "Kullanıcı Adı Buyara Girilecek" yazısı görünecek.


Aşağıda yazılı kodların DEMO uygulaması
 


Örneğimizin kodları

<input type="text" name="username" placeholder="Kullanıcı Adı Buyara Girilecek" />

<script>
$(document).ready(function () {
  if(!Modernizr.input.placeholder) {
    $('[placeholder]').focus(function () {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function () {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }).blur();
    $('[placeholder]').parents('form').submit(function () {
      $(this).find('[placeholder]').each(function () {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });
  }
})
</script>