2011-09-20 4 views
0

내 코드에 도움이 필요합니다.자바 스크립트를 사용하여 워터 마크 텍스트 상자

자바 스크립트에서 클래스를 사용하는 것처럼 동적 인 코드를 원하지만 자바 스크립트를 사용하여 너무 강하지 않았습니다. 나는 당신의 해결책이 필요합니다.

예 : 텍스트 상자에 누군가가 텍스트 상자를 입력하면 '키워드 또는 문구 입력'텍스트가 표시됩니다. '키워드 또는 구문 입력'텍스트가 사라집니다. 텍스트 상자를 입력하거나 마우스를 누르지 않으면 '키워드 또는 구문 입력'텍스트가 다시 회색으로 표시됩니다. 나는 아래의 코드가 있습니다

<asp:TextBox ID="txtQuery" runat="server" style="color: Gray;" 
ValidationGroup="req" value='Enter key word or phrase' 
onblur="if (this.value == '') { this.value = 'Enter key word or phrase'; 
this.style.color = 'Gray'; }" 
maxlength="255" onfocus="if(this.value == this.defaultValue){this.value=''; 
this.style.color='Black'}"></asp:TextBox> 

도와주세요.

+0

에서 무언가를 검색 할 대상은 무엇인가 : 라이브 예를 들어 방문

? 데이터베이스 또는 Google 검색을 사용하고 싶습니다. – adatapost

+0

코드가 작동하기 때문에 문제를 이해할 수 없다고 생각합니다. 이 jsfiddle를보십시오 : http://jsfiddle.net/NdkwJ/ – Icarus

+0

r 뒤에 코드를 사용하여 추가하려고합니다. – Binil

답변

0

마찬가지로 코드가 작동해야하지만 자바 스크립트에서 텍스트 상자의 유효성을 검사하는 동안 텍스트를 빈 텍스트로 제출하거나 처리하는 동안 텍스트 상자를 지우는 것과 같은 몇 가지 시나리오도 처리해야합니다.

jquery를 사용하는 경우 위의 기능에 사용할 수있는 플러그인이 거의 없습니다. 예를 들어, labelify을보십시오.

0
<asp:TextBox ID="txtQuery" CssClass="baseVal" runat="server" Text="Enter key word or phrase"></asp:TextBox> 
<script type='text/javascript'> 
     function ClearMLSText() { 
      if ($("#txtQuery").val() == "Enter key word or phrase") { 
       $("#txtQuery").val(""); 
       $("#txtQuery").addClass("hasVal").removeClass("baseVal"); 
      } 
     } 

     function BaseMLSText() { 
      if ($("#txtQuery").val() == "") { 
       $("#txtQuery").val("Enter key word or phrase"); 
       $("#txtQuery").addClass("baseVal").removeClass("hasVal"); 
      } 
     } 
</script> 

<style type="text/css"> 
#txtQuery.baseVal { color: #999; font-style: italic; } 
#txtQuery.hasVal { color: #000; font-style: normal; } 
</style> 

또한 자바 스크립트를 사용하여 JQuery와 워터 마크 플러그인 Get WaterMark Plugin

0

워터 마크 텍스트 상자를보고 할 수 있습니다 :의 Ajax 툴킷에서

에 의해 텍스트 상자에 추가 할 수있는 워터 마크 익스텐더가있다 텍스트 상자에 포커스가있을 때마다 그것에 쓰여진 기본 텍스트가 지워집니다. 자바 스크립트로 할 수있는 것과 똑같은 일은 아약스 툴킷을 사용하는 것보다 자바 스크립트 또는 jquery를 더 많이 사용하므로 서버 속도가 느려서 페이지가 렌더링됩니다. http://www.dotnetchallengers.com/App_Folder/Content/CodeSnippets/Java%20Script/WaterMark%20a%20Text%20box%20Using%20javascript%20Java%20Script/WaterMark_a_Text_box_Using_javascript_Java_Script.aspx?TutorialIds=17

관련 문제