검색 상자에 Onfocus 이벤트에 글꼴 색 추가

Question

검색 상자에 기본값의 색과 글꼴을 추가하는 방법.

<input type="text" name="q" value="Enter your keywords here"  
onfocus="if (this.value == 'Enter your keywords here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your keywords here';}" 
onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')"; 
x-webkit-speech style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px  solid;color:#333;font-size:1.4em;width:400px;height:28px"; /> 

Answer 1

변화 스타일의 색상 ... 당신도 작동

<input type="text" name="q" value="Enter your keywords here"  
onfocus="if (this.value == 'Enter your keywords here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your keywords here';}" 
onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')"; 
x-webkit-speech style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px solid  #555;color:#aaa;font-size:1.4em;width:400px;height:28px"; /> 

Answer 2

당신은 입력 상자의 기본 스타일을 설정할 수 있습니다 후 다음과 같이 onfocus 및 컬러 및 위해 onblur 이벤트를 변경합니다

<input type="text" name="q" value="Enter your keywords here"  
    onfocus="if (this.value == 'Enter your keywords here') { 
     this.value = ''; 
     this.style.color = '#000'; 
    }" 
    onblur="if (this.value == '') { 
     this.value = 'Enter your keywords here'; 
     this.style.color = '#CCC'; 
    }" 
    onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')"; 
    x-webkit-speech 
    style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px solid; color:#CCC;font-size:1.4em;width:400px;height:28px"; 
/> 

을 그리고 당신은 확실히 별도의 스크립트에서이 이벤트 코드를 넣어 고려해야한다 코드를보다 깔끔하게 보이게 만들 수 있습니다.

조금 더 깨끗한 코드를 위해이 피들을 볼 수도 있습니다. http://jsfiddle.net/MXpSw/