Odoslanie formuláru cez Shift + Enter a jQuery

napísal yablko, 30 Dec 2010 [

]

$(function()
{
	var form = $('#form'); // zmenit podla potreby
	
	form.keydown(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', true);
	}).keyup(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', false);
	}).keypress(function(e)
	{
		if (e.keyCode == 13 && form.data('shiftPressed'))
		{	
			form.submit();
			return false; // OH NO, STOP THE ENTERS!!
		}	
	});
})

Stačí skopírovať uvedený kód a podľa potreby zmeniť riadok var form = $('#form'); Tento predpokladá formulár s id="form".

Funkcionalita sa skladá z troch častí - čo sa stane pri keydown, keyup a keypress. Kto klikne na "povedz mi o tom viac", tomu o tom bude povedané viac :)

keydown je udalosť, ktorá nastane pri zatlačení ktoréhokoľvek tlačítka.

form.keydown(function(e)
{
	if (e.keyCode == 16) form.data('shiftPressed', true);
})

Čo teda robíme? Prikazujeme nášmu formuláru, aby odchytával keydown udalosť / event. Ak nastane, pustí uvedenú funkciu. Ok, čo je to e? To e je Event Object. Nesie v sebe rôzne informácie o udalosti, napríklad numerický kód stlačeného tlačítka. 16 je shift. Ak bol stlačený práve shift, použijeme jQuery.data() na uchovanie toho, že shift je skutočne stlačený.

keyup je udalosť, ktorá nastane pri pustení tlačítka. You know, keď ho prestaneme držať stlačené :)

form.keyup(function(e)
{
	if (e.keyCode == 16) form.data('shiftPressed', false);
})

Ak sme pustili tlačítko a toto tlačítko bol práve shift, už shift nedržíme, preto hodnotu shiftPressed zmeníme na false, pretože ho už nedržíme :)

keypress je udalosť, ktorá nastane pri stlačení tlačítka, ktoré je schopné aj niečo reálne napísať. To je rozdiel od keydown. Napr. ten náš shift nenapíše nič, "a" napíše "a" a taký enter "napíše" nový riadok.

form.keypress(function(e)
{
	if (e.keyCode == 13 && form.data('shiftPressed'))
	{	
		form.submit();
		return false; // OH NO, STOP THE ENTERS!!
	}	
})

keyCode pre enter je 13. Ak sme stlačili enter, potrebujeme ešte skontrolovať, či držíme stlačený aj shift. Takže ak form.data('shiftPressed') je true, sme good to go a odošleme formulár pomocou form.submit(); Ak ale máme textareu a stlačíme enter, pridá nám do nej nový riadok. return false; tomu zabráni.

So yeah, teraz máme formulár, ktorý sa dá odoslať jednak tradične a jednak klávesovou skratkou shift+enter. Pre nás lenivých, čo je nám veľa roboty ruku od klávesnice odlepiť.

Mimochodom, ak používate firebug, skúste console.log(e); a uvidíte aký ďalší šikovný stuff so sebou event object teperí. A ak nepoužívate, začnite :)

napísal yablko, 30 Dec 2010

1 komentár

komentuj

penge [ Sobota 8.1.2011, 11:29 ]

V súvislosti s týmto návodom mi prišiel na um ďalší výborný prípad použitia a to "Ako zabrániť odoslaniu formulára stlačením klávesy Enter", čo je možné pokiaľ sa kurzor nachádza v jednom z textových okienok.

Užitočné to príde tam, kde vyplnenie všetkých položiek je povinné a ich kontrola je obyčajne vykonaná po stlačení tlačítka Submit.

Dosiahnuť takého výsledku je možné malou modifikáciou uvedeného kódu, resp. vyhodením nepotrebných častí, pretože nás zaujíma len jedna klávesa - Enter.

Pre doplnenie uvádzam, ako môj príklad vyriešiť bez jQuery.

Input formulára má nastavenú udalosť onKeyPress:

onKeyPress="return submitenter(this,event)"

JS vyzerá nasledovne:

function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;

if (keycode == 13) //Ak je Enter
{
return false;
}
else return true;
}

To je všetko milí vážení :)

brm

Odoslanie formuláru cez Shift + Enter a jQuery