Текст окна поиска - Показать скрытую функцию

Question

На странице site Chris Coyer он использует красивую маленькую поисковую строку. Мне любопытно узнать, как вы получите текст в окне поиска, чтобы исчезнуть и снова появиться, когда вы выходите из окна.

Благодаря полезному человеку на этом форуме я использую следующий, чтобы текст исчезает, когда я нажимаю в коробке:

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';"/> 

Кроме того, в Safari есть неприятная граница вокруг поля ввода, когда я щелкнув внутри. Каков код для избавления от этого?

Спасибо!

Answer 1

Я не верю, что вы можете удалить границу в Safari, хотя и открытую для исправлений.

Чтобы получить текст появится снова при нажатии кнопки из окна поиска, вы можете использовать это:

<input onblur="if (this.value == '') this.value ='Search';" /> 

Answer 2

Чтобы сбросить текст поиска, добавьте ONBLUR:

onblur="if (this.value=='') this.value='Search';" 

так ваше поле ввода становится:

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

также для границы Safari, добавьте это в CSS:

input[type=text]:focus, 
input[type=password]:focus { 
    outline: 0 none; 
} 

Answer 3

Вы можете избавиться от дублирования статического значения, если вы сделаете использование собственности DefaultValue

Сравните это

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

, который имеет три экземпляра statc строки «Поиск», чтобы это

<input type="text" value="Search" onblur="if ('' == this.value) this.value = this.defaultValue;" onfocus="if (this.defaultValue == this.value) this.value='';"/> 

который имеет только один.

Но если вы действительно хотите перенести это на «следующий уровень», вы можете реализовать что-то вроде почти канонического labels.js. Код действительно старенький, будучи автором в 2002 году (я думаю), но концепция звучит, и с тех пор ее базовая концепция была хорошо использована с modernframeworks.