양식에 워터 마크 효과 사용

Question

내 HTML 양식에 워터 마크 효과를 구현하고 싶습니다.

내가 가진 내 모든 텍스트 상자에 특정 값을 설정하려면이 http://jsfiddle.net/aMjT4/1/

처럼 내 코드입니다. 내 텍스트 상자 필드

<input type="text" id="firstName" name="firstName" value="Enter First Name" class="inputTextboxId"/> 

에서와 마찬가지로 나는 값에서 워터 마크 텍스트를 설정합니다. (값 = "이름을 입력합니다").

내 자바 스크립트는이 모양이지만 내 양식 필드에 워터 마크 텍스트를 설정합니다.

$(document).ready(function() { 
     var watermark = 'Enter something...'; 
     $('.inputTextboxId').blur(function() { 
      if ($(this).val().length == 0) 
       $(this).val(watermark).addClass('watermark'); 
     }).focus(function() { 
      if ($(this).val() == watermark) 
       $(this).val('').removeClass('watermark'); 
     }).val(watermark).addClass('watermark'); 
    }); 

어떻게 내 모든 텍스트 상자에 값 텍스트를 설정할 수 있습니까?

이 코드가 있지만이 코드에서는 모든 텍스트 상자에이 코드를 써야합니다. 이것을 생성하는 방법은 무엇입니까?

<input type="text" id="city" name="city" value="Enter Your City" class="inputTextboxId" onblur="if (this.value == '') { this.value = 'Enter Country City';this.style.color = 'Gray'; }" maxlength="255" onfocus="if(this.value == this.defaultValue){this.value='';this.style.color='Black'}"/> 

Answer 1

이것은 어려운 방법입니다. 플러그인을 작성하거나 즉시 사용할 수있는 플러그인을 가져 오려고합니다.

http://plugins.jquery.com/project/TinyWatermark

http://plugins.jquery.com/plugin-tags/watermark

여기에 내가

이는 JS 파일의 코드를 작성 하나;

(function ($) { 
    $.fn.extend({ 
     watermark: function() { 
      return this.each(function() { 
       var $obj = $(this); 

       $obj.val($obj.attr("watermarkText")); 

       $obj.focus(function (e) { 
        if ($obj.val() == $obj.attr("watermarkText")) 
         $obj.val(""); 
       }); 

       $obj.blur(function (e) { 
        if ($obj.val() == "") 
         $obj.val($obj.attr("watermarkText")); 
       }); 

      }); 
     } 
    }); 
})(jQuery); 

그리고 나서 html;