Input verwerken bij verlies focus

[BLACKfm]

Hallo,

Ik wil voor het eerst een windows gadget maken (ja die 'oude' dingen van windows vista), nu is dat op zich niet zo moeilijk gezien je een webpagina als basis kunt gebruiken.

Nu kan ik prima een designtje in elkaar poetsen, maar de techniek laat soms te wensen over.

Ik wil een simpel urenregistratie dingetje maken waarbij je het aantal uren dat je aan een project werkt kunt verwerken in een input veld van een formulier.

Nu kan ik daar wel simpel doch effectief een 'verwerk' knop bij zetten, maar ik zou het mooier vinden dat als men óf op enter drukt (wat volgens mij standaard al gebeurd) óf bij verlies van de focus van het inputveld (er wordt ergens anders geklikt) het form verwerkt wordt.

Dat focus gedeelte wil niet echt lukken... Het lijkt me dat dit wel met een stukje javascript kan, net zoals dat vooringestelde tekst wegvalt bij een inputveld als er op geklikt wordt en als het veld leeg blijft en je klikt weer buiten het veld komt de standaard waarde weer terug.

Ik weet niet zo goed waar ik daarop moet zoeken, dus wellicht dat iemand me in de goede richting kan sturen.

Uiteindelijk is dus de bedoeling dat als je in een inputveld klikt je wat kunt invullen en als je vervolgens de focus op dat veld verliest deze automatisch het form 'verzend' en dus verwerkt/opslaat.

Werken me ajax of allerhande webtechnieken die dit allemaal mooi kunnen is voor mij een no-go, want daar kan ik niet mee overweg.

Alvast bedankt.

[Phoenix1337]

Toevallig al naar jquery gekeken? Daar heb je de .blur methode die aangeroepen wordt wanneer de focus op een input verdwijnt. Mocht je geen jquery willen gebruiken dan kan je vast wel iets vinden op de termen "jquery blur alternative".

[ZeroXT]

Zonder JQuery:

JavaScript:

document.getElementById('input').onblur = function()
{
    alert('Object heeft geen focus meer.');
}

[NNF]

Met jQuery gaat dat inderdaad heel makkelijk door e.e.a. aan het 'blur' event te binden.

Let wel dat Chrome de irritante eigenschap heeft om een invoerveld niet te focussen als erop geklikt wordt. Focus is het tegenovergestelde van blur, dus het gevolg is dat er ook geen blur-event optreedt als de user het veld weer verlaat. Je moet dus eerst zelf instellen dat het veld gefocust wordt:

code:

$(':input').each(function(){
    $(this).on('click', function(){
        $(this).focus(); // fix voor chrome
    });
    $(this).on('blur', function(){
        // verwerk het formulier
    });
});

Waarschijnlijk is het handiger om alle tekstvelden een bepaalde klasse mee te geven en de velden op die manier aan te spreken, omdat :input ALLE form controls eruit haalt, dus ook checkboxes en knoppen. Wellicht wil je dat niet Maar goed, het is ook maar een voorbeeld.

[ Voor 18% gewijzigd door NNF op 31-05-2013 09:02 ]

[Phoenix1337]

Dan kan je ook gewoon de input[type="text"] selector nemen als je de rest niet wil hebben.

[OkkE]

ZeroXT schreef op vrijdag 31 mei 2013 @ 01:13:
Zonder JQuery:

JavaScript:

document.getElementById('input').onblur = function()
{
    alert('Object heeft geen focus meer.');
}

^ Dit. Of .querySelectorAll() als je met iets anders dan een ID wil werken.