Често когато използвате HTML форми желаете дадени полета да са предварително запълнени. Идеята е да подскажете на потребителя какво да попълни в даденото поле. Ето за какво говоря:
Най вероятно вие желаете, когато потребителя кликне в полето, текста да изчезва. Най елементарният начин да направим това е като добавим малко javascript.
-
<form>
-
<input onclick="this.value=''" type="text" value="Your email" />
-
</form>
До тук добре, но потребителят е възможно да достигне до полето и по друг начин, папример с таб, затова е по разумно да използваме onFocus вместо onClick:
-
<form>
-
<input onFocus="this.value=''" type="text" value="Your email" />
-
</form>
До тук всичко изглежда ОК, но имаме един не малък проблем. Когато потребителя попълни полето, разгледа малко сайта с в един момент реши да се върне пак на същото поле, въведената стойност ще се изтрие отново ! За да сме сигурни, че това няма да се случи нека добавим малка проверка:
-
<form>
-
<input type="text" value="Your email" onfocus="if (this.value == 'Your email') {this.value=''}" />
-
</form>
Ето:
Въстановяване на стойността по подразбиране, ако нищо не е въведено
За сега всичко работи добре, но когато потребителят кликне в полето и реши да не попълва нищо … полето остава празно. Ние не искаме това да е така, затова ще направим така, че стойността по подразбиране да се възстановява ако не е въведено нищо в полето:
-
<form>
-
<input type="text" value="Your email" onblur="if(this.value == '') { this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.value=''}" />
-
</form>
Понякога обаче това не е най-доброто решение за нас. Ако желаем при кликване или фокусиране на полето текстът ни да се селектира ще използваме следния код:
-
<form>
-
<input onfocus="this.select()" type="text" value="Your previous searcj" />
-
</form>
Като допълнително ефектче може да добавим и променлив цвят на текста или фона:
-
<form>
-
<input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''}" />
-
</form>
Това е за сега … надявам се да ви е полезно и да ви даде поле за експерименти 
. Имайте впредвид факта, че многото код може да доведе до бъгове под някой браузъри. Но всичко се оправя.
Преведено от тук
#1 by dd on July 20, 2009 - 2:37 am
skoro 6te imali urocite za kodiraneto na saita koito be6e po4nal
#2 by dd on July 20, 2009 - 9:50 pm
skoro 6te imali urocite za kodiraneto na saita koito be6e po4nal.
#3 by admin on July 21, 2009 - 6:19 pm
Да !
Тоя месец ми беше доста натоварено понеже имах изпити.
Направил съм половината уроци, но чакам да ги направя всичките, за да ги кача едновременно. Сега ще се хвана да ги довърша до 1-2 седмици. и ще ги пусна
ПП: Препоръчително е да пишете на кирилица
#4 by Станислав Кирилов on July 25, 2009 - 9:53 am
Браво, това е наистина полезно при работа с формите, помага да се създаде по-приятен вид
#5 by Clemento on August 3, 2009 - 2:08 am
Hmm… I read blogs on a similar topic, but i never visited your blog. I added it to favorites and i’ll be your constant reader.
#6 by Peter on August 4, 2009 - 2:52 am
Valuable thoughts and advices. I read your topic with great interest.
#7 by dd on August 18, 2009 - 2:09 am
Скоро ще имали някави ново уроци ?
#8 by nzhul on August 18, 2009 - 10:01 am
Да тия дни ще постна един дълъг урок за layout със видео, снимки и текст.
Иначе правя и уроците за кодиране на предния layout, но там нещата нещо се проточиха, но ще станат