onFocus .css и onblur .css - PullRequest
Новая
       20

onFocus .css и onblur .css

1 голос
/ 18 января 2012

Мой HTML содержит такой заполнитель: 

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within')this.value='';" onblur="if (this.value=='')this.value='Search Within';">

Это был не мой выбор, и я не могу его удалить ... но мне было интересно, как я могу установить CSS тоже ... Я хочу сделать что-то вроде onfocus="if (this.value=='Search Within')this.value=''; $(this).css('color','000000');" и onblur="if (this.value=='')this.value='Search Within';$(this).css('color', 'A9A9A9');". Как мне это сделать?

Спасибо

Ответы [ 5 ]

3 голосов
/ 18 января 2012

Вы можете использовать псевдоселекторы: 

input[type=text]:focus {
  color: black;
}

input[type=text] {
  color: gray;
}
2 голосов
/ 18 января 2012

На самом деле вы в значительной степени предоставили код, за исключением двух ошибок:

  1. Вам нужно # перед вашими цветами.
  2. Вы должны обернуть свои условные скобки в фигурные скобки

Все остальное было хорошо (я изменил цвета, чтобы было более очевидно, что происходит): 

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within'){this.value='';$(this).css('color','#00ff00');}" onblur="if (this.value==''){this.value='Search Within';$(this).css('color', '#ff0000');}">

http://jsfiddle.net/A4cuy/6/

Конечно, в конечном итоге это действительно уродливый код, и мы советуем размещать JavaScript в отдельных обработчиках.

0 голосов
/ 22 января 2015

Tast this: 

<input id="fldnm" style="background:#B6FF00" type="text" value="Search"
  onfocus="if(this.value=='Search'){this.value=''}this.style='background:#FF7F7F';"
  onblur="if(this.value==''){this.value='Search'this.style='background:#B6FF00';}else{};"
   />
0 голосов
/ 18 января 2012

Вы можете использовать следующие 

$('#additionalsearch')
.bind('focus',function(){
       if (this.value=='Search Within'){
             this.value='';
        };
        $(this).css('color','black')})
.bind('blur',function(){
       if (this.value==''){
          this.value='Search Within';
       }           
       $(this).css('color','gray')});
0 голосов
/ 18 января 2012

Вы можете использовать псевдокласс: фокус для цвета http://www.w3schools.com/cssref/sel_focus.asp

Что касается функции "Поиск внутри", я рекомендую использовать плагин defaultText jQuery

http://archive.plugins.jquery.com/project/defaultInputText

...