[jQuery] Default form inputs

Door WeeJeWel op maandag 6 december 2010 22:00 - Reacties (9)
Categorie: Webshizzle, Views: 3.621

Soms wil je een doorzichtige tekst in een formulier hebben, zoals een zoekveld bijvoorbeeld. Wanneer de gebruiker gaat typen moet dit verdwijnen en de tekst donkerder worden. Mocht het veld toch leeg blijven, dan mag de tekst wel weer terug naar de 'hint'-staat.

Veel werk om te coderen voor elk veld, dus zie hier een jQuery plugin :)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function($){  
    $.fn.extend({   
        defaultInput: function() {  
            return this.each(function() {  
                $(this).data( 'default', $(this).val() ).bind('focus',function(){
                    $(this).val('').removeClass('default');
                }).bind('blur', function(){
                    if( $(this).val() == '' )
                    {
                        $(this).val( $(this).data('default') ).addClass('default');
                    }
                });
            });  
        }  
    });     
})(jQuery);


En zo te gebruiken (slikt ook meerdere elementen in de selector):
JavaScript:
1
$('input#search').defaultInput();

Geef je element de class default mee voor de extra, lichtere opmaak.

Have fun! :*)

Volgende: BNN win! 12-'10 BNN win!
Volgende: Wake Up Call 11-'10 Wake Up Call

Reacties


Door Tweakers user Lye, maandag 6 december 2010 22:02

Daarvoor heb je het HTML5 placeholder attribuut toch.. Ok, misschien dat dit dan nog handig is voor IE8 en lager..

Door Tweakers user WeeJeWel, maandag 6 december 2010 22:12

Lye schreef op maandag 06 december 2010 @ 22:02:
Daarvoor heb je het HTML5 placeholder attribuut toch.. Ok, misschien dat dit dan nog handig is voor IE8 en lager..
Was het maar vast zo ver :D

Door Tweakers user plofkip, maandag 6 december 2010 23:48

En waarom heb je het zelf gemaakt?
Omdat het kan/just for fun of omdat je er geen één kon vinden?

Door Tweakers user ZpAz, dinsdag 7 december 2010 09:32

Met jQuery alle attributen afgaan welke het 'placeholder' attribuut heeft (werkt ook als de browser het niet ondersteund) en er dan een eigen implementatie aan hangen.

Door Tweakers user Meijuh, dinsdag 7 december 2010 10:09

.bind('blur', function(){
if( $(this).val() == '' )
{
$(this).val( $(this).data('default') ).addClass('default');
}
});

is hetzelfde als

.blur(function(){
if( $(this).val() == '' )
{
$(this).val( $(this).data('default') ).addClass('default');
}
});

Door Tweakers user Chesta, dinsdag 7 december 2010 11:19

ZpAz schreef op dinsdag 07 december 2010 @ 09:32:
Met jQuery alle attributen afgaan welke het 'placeholder' attribuut heeft (werkt ook als de browser het niet ondersteund) en er dan een eigen implementatie aan hangen.
Toevallig heb ik dat vrijdag gemaakt :)
Hint: hiermee kun je controleren of de browser zelf al placeholders ondersteund of niet:
return 'placeholder' in document.createElement('input');

Door Wouter Boevink, dinsdag 7 december 2010 12:32

Toevallig vorige week nog naar gezocht, JQuery placeholder script:

http://github.com/NV/placeholder.js

Door Tweakers user i-chat, woensdag 8 december 2010 15:28

toch een leuk stukje code. ik ben benieuwd naar een reactie van iemand die dit script met z'n eigen 'voorstel' heeft vergleken, alternatieven zijn er immers altijd wel, ik ben dus zeer benieuwd naar de meningen van mensen die er ECHT verstand van hebben (dus niet ikke:p)

[Reactie gewijzigd op woensdag 8 december 2010 15:31]


Door Tweakers user creator1988, woensdag 8 december 2010 16:01

Oké mijn two cents:

0. Heb je dit uberhaupt getest? Voer een waarde in in een geplaceholderd object en klik weg: data leeg.

1. Probleem met jouw stuk code is volgens mij dat bij een 'submit' van de form de elementen niet leeg worden, en je dus je placeholders als data binnen krijgt. Bovendien krijg je rare semantiek in je HTML. Want je moet een placeholder schrijven als:


HTML:
1
<input type="text" value="placeholder" />



Wat nou als je je value zet vanuit code, maar toch een placeholder wilt wanneer de gebruiker het veld leegmaakt?

2. Daarnaast gebruik je '== [empty string]', wat ook true gaat geven wanneer je in textbox de waarde '0' stopt.

3. Gebruik voor dit soort code liever 'live' dan 'bind', want dan kan je ook on the fly nog elementen toevoegen aan de DOM met placeholders.

4. $(this) maakt elke keer een nieuw object aan. Cachen kan door in het begin van elk event 'var $this = $(this)' te zetten daarmee te werken. Bespaart resources.

Ter vergelijking: ons stuk code voor dit effect (waarbij 4. ook genegeerd is overigens):


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// functie voor initialisatie
var initPlaceHolders = function() {
    jQuery('*[placeholder]').each(function() {
        if ($(this).val() === '') {
            $(this).addClass('default-text').val($(this).attr('placeholder'));
        }
    });
};

// on ready registreren we de init, en de live functions die jij ook al gebruikt
jQuery(document).ready(initPlaceHolders).ready(function() {
    jQuery('*[placeholder]').live('focus', function() {
        if ($(this).val() === $(this).attr('placeholder')) {
            $(this).val('').removeClass('default-text');
        }
    }).live('blur', function() {
        if ($(this).val() === '') {
            $(this).val($(this).attr('placeholder')).addClass('default-text');
        }
    })
});

// aan elk form event geven we een submit handler mee die ervoor zorgt dat de textbox'es leeg worden gemaakt bij submit()
jQuery(document).ready(function() {
    jQuery('form').submit(function() {
        $('*[placeholder]').each(function() {
            if ($(this).val() === $(this).attr('placeholder')) $(this).val('').removeClass('default-text');
        });

        // als submit wordt gecancelled moeten de placeholders terug worden gezet
        setTimeout(initPlaceHolders, 1);
    });
});

[Reactie gewijzigd op woensdag 8 december 2010 16:05]


Om te kunnen reageren moet je ingelogd zijn. Via deze link kun je inloggen als je al geregistreerd bent. Indien je nog geen account hebt kun je er hier één aanmaken.