jQuery - En egen vattenstämpel-funktion på formulär

I den här artikeln kommer jag att gå igenom hur du kan skapa en egen funktion som sätter en "vattenstämpel" (Watermark) på ditt textfält. Det är en mycket enkel procedur, vilket innebär att du inte behöver vara expert för att kunna förstå allt.

Demo

Slutprodukten kommer att se ut så här:
http://www.aspkoll.se/sandbox/watermark-input-1/

Mål

Vi vill att funktionen ska kunna göra följande:

• Lägga valfri vattenstämpel (text) på textfält, man ska kunna välja själv vad det ska stå där
• Att kunna lägga en vattenstämpel genom att ange den i ett attribut, t.ex. om man skriver texten som ska bli i attributet title="" så ska skriptet kunna plocka ut det och använda det som vattenstämpel. Detta gör att:
• Vi måste kunna bestämma vilket attribut som funktionen ska hämta texten från och använda den som vattenstämpel
• Den ska sudda vattenstämpeln vid "onmouseover" och visa den igen vid "onmouseout" om inget har skrivits i fältet.

Det låter svårt, men det är det inte ;)

XHTML

Vi börjar med XHTML koden, det är inget speciellt med den, ett enkelt formulär eller bara ett textfält helt enkelt:

<input type="text" id="myInput" />

Du kan lägga till flera stycken textfält ifall du vill experimentera med att lägga vattenstämplel på flera textfält samtidigt:

<form id="testForm">
   <input type="text" alt="Text här" />
   <input type="text" alt="Text här" />
   <input type="text" alt="Text här" />
</form>

jQuery

Då börjar vi trolla. Först och främst, vi gör en funktion av hela denna grej, eller snarare ett plugin. Så all kod vi kommer att skriva ihop senare lägger vi in i detta:

(function($){
   ...HÄR LÄGGER VI IN ALLT...
})(jQuery);

Vi skapar functionen:

$.fn.watermark = function(watertext, attribute) {
   ...HÄR LÄGGER VI IN ALL KOD SOM VI SKRIVER NEDAN...
}

Och som jag har skrivit i koden, allt vi skriver nedan läggs in där det står att koden skall vara.Du ser att vi har två parametrar, watertext som är den texten som skall användas som vattenstämpel och attribute som definierar vilket attribut på fältet som skall användas för att hämta ut vattenstämpeln (text). Attributet kommer inte att gälla om man har redan angett en watertext.

Vi behöver några variabler som har hand om det viktigaste i pluginet:

var wField = $(this);
var wStandardCss = {'color':'#000'};
var wWaterCss = {'color':'#ccc'};
var wAttribute = 'alt';
var wReset = true;
var wWaterText = waterText;

wField kommer att vara fältet som berörs.
wStandardCss är den CSS koden som ska gälla när man skriver i fältet. Som ni ser så använder jag jQuerys metod för att definiera CSS egenskaperna, vill man lägga till mer så är det bara att göra det:

{'color':'#000','background':'#fff'};

wWaterCss är den CSS koden som skall gälla på vattenstämpeln.
wAttribute är standardattributet som kommer att gälla när man inte har skrivit själv någon vattentext. Standard är "alt", går att ändra.
wReset är variabeln som kontrollerar om vattenstämpeln skall återställas eller ej.
wWaterText är variabeln som skall innehålla vattenstämpeln/vattentexten. Standard är att den hämtar det man skickar in med parametern watertext.

Nu kommer nästa kod:

if(attribute!=null) { wAttribute = attribute; }
if(wWaterText==null) { wWaterText = wField.attr(wAttribute); }

Om parametern attribute innehåller något så ska det gälla. Gör den inte det så kommer det som är standard att gälla. Den andra raden kollar ifall variabeln wWaterText innehåller något (alltså ifall parametern watertext innehåller något). Om den inte gör det så hämtar den texten som man angett i attributet.

wField.css(wWaterCss).val(wWaterText);

Inget konstigt med koden. Vi fyller fältet med vattentexten och vi använder den CSS koden som gäller för vattenstämpeln.

wField.hover(
    function(){
        if(wField.val()==wWaterText){
            wField.css(wStandardCss).val('');
        }
    },
    function(){
        if(wField.val()=='' && wReset){
            wField.css(wWaterCss).val(wWaterText);
        }
    }

);

Ovanstående kod hanterar vad som skall hända vid "onmouseover" (första funktionen) och "onmouseout" (andra funktionen). När man pekar på fältet raderas vattentexten om innehållet i fältet är det samma som innehållet i vattentexten.

När man drar bort muspekaren från fältet så återställs vattenstämpeln, men bara om det fortfarande är tillåtet att återställa texten, d.v.s. att wReset är fortfarande true. Vill du veta hur vi hanterar den variabeln? Kolla nedan :)

wField.click(function(){ wReset = false; });

När man klickar i fältet så vill vi avbryta återställningen, d.v.s. sätta wReset till false. Varför? Ja för det vore jobbigt om man klickade där, skrev något och allt försvann när man drog bort muspekaren, eller hur? Så, till sista koden:

wField.blur(function(){ 
    if(wField.val()==''){
        wField.css(wWaterCss).val(wWaterText);
        wReset = true;
    }
});

Den här koden gör att när man klickar utanför textfältet så återställs vattenstämpeln, men bara om fältet är tomt. Det som händer också är att wReset sätts till true så hover-effekten kan fungera.

Det där var hela koden. Så hur anropar man den då? Enkelt! Vill vi sätta en text på ett fält så gör vi så här:

$('#mittFalt').watermark('Vattenstämpel');

Ser du att vi bara angav en parameter och inte två? Kommer du ihåg varför? Precis, för att parametern watermark är hierarkist högre än parametern attribute. Med enklare ord, så länge du har angett ett värde för watermark så kommer funktionen att strunta i attribute.

Vill du hämta alla textfält i ett formulär och lägga in vattenstämpel på? Vill du att den ska hämta vattenstämpeln från attributet alt="" som har gjort i vår XHTML kod?

$('#testForm input').each(function(){
    $(this).watermark();
});

Vill du göra samma sak som ovan fast ändra attribut?

$('#testForm input').each(function(){
     $(this).watermark(null, 'title');
 });

Svårare än så är det inte!

Hela koden

(function($){
    $.fn.watermark = function(waterText,attribute){
        /*
        * Variables!
        */
        var wField = $(this);
        var wStandardCss = {'color':'#000'};
        var wWaterCss = {'color':'#ccc'};
        var wAttribute = 'alt';
        var wReset = true;
        var wWaterText = waterText;
    
        /*
        * Check the parameters.
        */
        if(attribute!=null) { wAttribute = attribute; }
        if(wWaterText==null) { wWaterText = wField.attr(wAttribute); }
    
        /*
        * Add the water text.
        */
        wField.css(wWaterCss).val(wWaterText);
    
        /*
        * Manage the hover effect.
        */
        wField.hover(
        /*
        * OnHover: If there is text in the field != wWaterText, then don't delete text.
        */
        function(){
            if(wField.val()==wWaterText){
                wField.css(wStandardCss).val('');
            }
        },
        /*
        * If the user doesn't type anything and hover out, then reset text.
        * But only if the user has not clicked in the field yet!
        */
        function(){
            if(wField.val()=='' && wReset){
                wField.css(wWaterCss).val(wWaterText);
            }
        }
    );
    
    /*
    * When clicked, disallow reset water text on hover out.
    */
    wField.click(function(){ wReset = false; });
    
    /*
    * When blurred, if the value is empty, then reset the water text
    * and allow reset water text on hover out
    */
        wField.blur(function(){ 
        if(wField.val()==''){
            wField.css(wWaterCss).val(wWaterText);
            wReset = true;
        }
    });
}
})(jQuery);

Slutord

Vi har skapat oss en mycket enkel funktion (ett plugin) som sätter en vattenstämpel på textfält. Vi har valt att bygga den så att vi kan bestämma innehållet på vattenstämpeln på olika sätt. Man kan utveckla det här ännu mer. Du kan t.ex. göra så att parametrarna skickas in så här istället:

$(this).watermark({'text':'texten','attr':'title'});

Vilket i sin tur kräver att du ändrar lite i koden, men det borde inte vara några större problem.
Hoppas du får användning av artikeln!

Med reservation för stavfel.

Skapades: 2009-11-19 00:16:01
Skribent: Shadi
Lästs 1793 gånger
Betyg: 0 (artikeln har endast 2 röster, det krävs minst 5 för ett betyg)

Kommentarer