![Forum - HAJLO.COMmunity [ forum dyskusyjne, kasa za posty, forum młodzieżowe, forum wielotematyczne ]](http://forum.hajlo.com/images/hajlo/logo.png){kind=logo}
(21-02-2012 16:35) #1
[HTML5 JavaScript] Tekst zastępczy pola tekstowego
Jeśli nie mamy wystarczająco dużo miejsca na etykiety tekstowe, można je zastąpić innym rozwiązaniem.
Pole tekstowe (znacznik input) może mieć tak zwany tekst zastępczy, który znika, gdy chcemy w takie pole wpisać własny tekst. Rolą tekstu zastępczego jest najczęściej wyświetlanie informacji o zawartości, jaką trzeba w takim polu uzupełnić.
Aby dodać tekst zastępczy, należy znacznikowi input stworzyć znacznik placeholder:
Kod:
<input type="text" name="autor" placeholder="nick autora" />Niestety, w starszych, niezgodnych z HTML5 przeglądarkach tekst zastępczy nie pojawi się. Aby temu podołać, musimy stworzyć plik z rozwiązaniem zastępczym. Jego kod podaję tutaj.
Kod:
var placeholder = {};
placeholder.color = '#999';
placeholder.hasSupport = function() {
var input = document.createElement('input');
return 'placeholder' in input;
}
placeholder.doIt = function() {
var input = jQuery('input[placeholder]');
input.css('color', placeholder.color);
input.val(input.attr('placeholder'));
input.focus(function() {
if (this.value == jQuery(this).attr('placeholder')) {
this.style.color = '';
this.value = '';
}
});
input.blur(function() {
if (this.value == '') {
this.style.color = placeholder.color;
this.value = jQuery(this).attr('placeholder');
}
});
}
if (!(placeholder.hasSupport()))
jQuery(document).ready(function() { placeholder.doIt(); });Na koniec dołączamy ten plik do dokumentu wraz z frameworkiem jQuery.