Hajlo.COMmunity

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.

winek