Jquery 워터 마크가 HTML 페이지에서 작동하지 않습니다.

Question

HTML 페이지가 있습니다. 텍스트 상자에 워터 마크 기능을 구현하려고하지만 작동하지 않습니다. 이유는 모르겠지만, 나는 많은 일을 시도했지만 그렇게 할 수 없었습니다. 참조를 위해 내 코드를 참조하십시오

또한

<style type="text/css"> 
    input.watermark { 
     color: #999; 
    } 

    //light silver color 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script language="JavaScript"> 
    $(document).ready(function() { 
     var watermark = 'Puts your text here'; 
     $('#txtNameWaterMark').val(watermark).addClass('watermark'); 
     //if blur and no value inside, set watermark text and class again. 
     $('#txtNameWaterMark').blur(function() { 
      if ($(this).val().length == 0) { 
       $(this).val(watermark).addClass('watermark'); 
      } 
     }); 
     $('#txtNameWaterMark').focus(function() { 
      if ($(this).val() == watermark) { 
       $(this).val('').removeClass('watermark'); 
      } 
     }); 
    }); 
</script> 

, 참조 용 텍스트 상자의 HTML을 검색 할 수 있습니다 : -

<div class="contacttext"> 
<div class="errors"> 
    <ul></ul> 
</div> 
<div class="contactMain"> 
    <div class="contactName">Name</div> 
    <div class="contactformfield"> 
     <!--<input name="txtName" type="text" class="textboxEffect" id="txtName" value="" /><span class="errortext">*</span> --> 

     <input type="text" id="txtNameWaterMark" class="textboxEffect" /><span class="errortext">*</span> 
    </div> 
    <div id="nameError" class="red">&nbsp;</div> 
    <div class="clear"></div> 

    <div class="contactName">Contact</div> 
    <div class="contactformfield"> 
     <input name="txtName" type="text" id="txtNameWaterMark2" value="Enter Your Name" class="textboxEffect" /> 
    </div> 
    <div class="clear"></div> 

    <div class="contactName">Email</div> 
    <div class="contactformfield"> 
     <input name="txtName" type="text" value="Enter Your Name" class="textboxEffect" /> 
    </div> 
    <div class="clear"></div> 

    <div class="contactName">Comments</div> 
    <div class="contactformfield"> 
     <textarea name="" cols="" rows="" class="txtarea-postnow"></textarea> 
    </div> 
    <div class="clear"></div> 
    <br /> 

    <div class="contactName">&nbsp;</div> 

    <div class="contactformfield"> 
     <input type="submit" name="save" value="Submit" class="button" /> 
     <input type="button" name="btnReset" value="Reset" id="btnReset" class="button" /> 
    </div> 
</div> 

</form>     

팻시 잇사 댓글에서 지적

Answer 1

것은 당신이 정말로 입력/텍스트 영역으로 jQuery를 필요가 없습니다 이 속성 작업이 일을 만들기 위해 polyfill 여기 old browsers를 지원입니다해야하는 경우 지금

<input type="text" id="txtNameWaterMark" class="textboxEffect" placeholder="Placeholder text here..." /> 

Demo

: 자리 표시 자 속성이 jquery는 잔인합니다.

Answer 2

, 당신은 할 수 있습니다를

<input type="text" id="txtNameWaterMark" class="textboxEffect" placeholder="whatever text you want" /> 

대신 HTML5 자리 표시자인 자리 표시 자을 사용하는 것이 좋습니다.

---

이전 IE를 제외하고 이것은 주로 지원됩니다 (얼마나 놀라운가!). 그럼에도 불구하고 , 이미 페이지에 jQuery를 사용하고 있기 때문에, 당신이 사용할 수있는이 모든 브라우저에서 지원 만든다이 jQuery plugin : 주석에서 설명하고있는 바와 같이

<input type="text" name="name" placeholder="e.g. John Doe"> 
<input type="email" name="email" placeholder="e.g. address@example.ext"> 
<input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"> 
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"> 
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz"> 
<input type="search" name="search" placeholder="Search this site…"> 
<textarea name="message" placeholder="Your message goes here"></textarea> 

<script type="text/javascript"> 
    $('input, textarea').placeholder(); 
</script>