입력 상자와 CSS를 변질 색상

Question

나는 아래처럼 보이는 입력 상자를위한

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onclick = "this.className = 'focused'; javascript:Reset();" onblur = "javascript:Reset();" /> 

과 CSS .focused 및 형태의 텍스트는 부하에

.focused { 
color:black; 
} 

.form-text 
{ 
    background-color: #FFF; 
    color: #CCC; 
} 

입력 상자가있다 처음에는 회색 인 콘텐츠 '키워드 또는 구문 입력'. Onclick이 상자에 오타에 글꼴 색상이 검은 색으로 변경됩니다 (잘 작동 함). 내용을 삭제하거나 다음 필드로 이동하거나 마우스를 누르면 '키워드 또는 구문 입력'내용이 검은 색으로 바뀝니다. 여전히 회색이어야합니다. 내가 CSS에서 어떤 변화를해야합니까? 모든 입력이 도움이됩니다. 감사.

참고 : stackoverflow의 'title'필드가 원하는대로 작동하는 것으로 나타났습니다. 내 boc이 같은 방식으로 작동하기를 바랍니다.

Answer 1

사용 onfocus 및 대신합니다.

jsFiddle : http://jsfiddle.net/QybRX/14/

<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onfocus="this.value=''; this.className = 'focused'; javascript:Reset();" onblur = "basicSearch()" /> 
<input type="text"/> 

<script>  
    function basicSearch() 
    { 
     var element = document.getElementById("basic-search"); 

     if (element.value.length == 0) 
     { 
      element.value = 'Enter keyword or phrase'; 
      element.className = 'form-text'; 
     } 
     else 
     { 
      element.className = 'focused'; 
     } 

     javascript:Reset(); 
    } 
</script> 

Answer 2

사용자가 클릭 할 때 입력란에 "집중식"클래스를 추가하지만 그 클래스는 절대로 제거되지 않습니다. 당신과 같이, CSS에 :focus 선택기를 사용하여 클래스에 onblur을 제거하거나 전환 할 필요가 다음 중 하나를 온 클릭

.form-text 
{ 
    background-color: #FFF; 
    color: #CCC; 
} 

#basic-search:focus 
{ 
    color: black; 
} 

Answer 3

당신은 HTML5 Placeholder attribute을 모방하려고 또한, 귀하 위해 onblur를 들어, CSS 클래스를 추가? 보고 싶은 경우 this article