2012-06-02 3 views
1

Как добавить цвет и шрифт значения по умолчанию в поле поиска.Добавление цвета шрифта в событие Onfocus в поле поиска

<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"; /> 

ответ

0

изменение цвета в стиле ...

<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"; /> 
3

Вы можете установить стиль по умолчанию поля ввода, а затем измените цвет на 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/

+0

благодарит за вами также работает ... –

Смежные вопросы