Miloš Němec, osobní stránka

Vážení čtenáři, nacházíte se v dočasném archivu starých článků. Proto tu nevidíte žádnou navigaci, vyhledávání ani další prvky.

Navštivte můj nový projekt Venkohled - blog o aktivním pohybu na čerstvém vzduchu!

Jak zablokovat odeslání formuláře při stisknutí Enteru ve vybraném formulářovém poli

16.4.2009 | 4 240x přečteno | 0 komentářů TiskTisk

Nedávno jsem se setkal s požadavkem na vytvoření formuláře, který by se neodesílal při stisknutí klávesy Enter v jednom z formulářových polí. Při Enteru v ostatních polích se odesílat měl. Ve skutečnosti šlo o to, že na toto formulářové pole byla pověšená AJAXová komponenta. Při hledání řešení jsem nalezl celou řadu rad a návodů. V drtivé většině ale špatných. Pojďme se na jednotlivé možnosti řešení podívat.

1. Záměna "submit" za "button"

Snad nejčastěji uváděné řešení. Namísto

<input type="submit" ...>
uvedeme
<form name="form" ... >
  ...
  <input type="button" onclick="document.form.submit();" ...>
</form>
Zásadní nevýhoda je ale patrná na první pohled. Uživatel s vypnutým JavaScriptem formulář nikdy neodešle.

2. Použití dvou "submit" tlačítek

Při použití dvou prvků "submit" v jednom formuláři k odeslání formuláře při stisknutí Enteru nedochází. Je to pochopitelné, prohlížeč neví jaký submit má zavolat. Do formuláře tedy stačí přidat druhý skrytý prvek submit. Toto nepříliš elegantní řešení má ovšem podstatnou nevýhodu v tom, že formulář nelze odeslat stisknutím Enteru v žádném formulářovém poli. A to je nestandardní a pro řadu uživatelů iritující.

3. Odchycení Enteru a zablokování v onsubmit

Několikrát jsem se setkal i s různými variantami tohoto postupu:

<form name="form">
<input type="text" onkeydown="handleKeyDown(event)" ...>
...
</form>
...
<script type="text/javascript">
function GetKeyCode(e) {
  if (e) {
    return e.charCode ? e.charCode : e.keyCode;
  }
  else {
    return window.event.charCode ? window.event.charCode : window.event.keyCode;
  }
}


function handleKeyDown(event) {
  var unicode = getKeyCode(event);
  if (unicode==13)
    document.form.onsubmit=function() {return false};
}

</script>
Funkce handleKeyDown(event) rozpozná klávesu Enter a při jejím ztisknutí zcela zablokuje odeslání formuláře. Zablokuje ji navždy, takže je třeba v takovém případě formulář odesílat pomocí odchycení událostí onclick a onkeypress na prvku submit. Při enteru v textovém poli ale za určitých okolností dochází k vyvolání události onclick prvku "submit". Navíc se na "submit" posune i focus. S tím vším se musí programátor vyrovnat. Toto řešení je cesta do pekel.

4. Finální funkční řešení

<form name="form">
<input type="text" onkeydown="handleKeyDown(event)" ...>
...

</form>
...
<script type="text/javascript">
function GetKeyCode(e) {
  if (e) {
    return e.charCode ? e.charCode : e.keyCode;
  }
  else {
    return window.event.charCode ? window.event.charCode : window.event.keyCode;
  }
}

function handleKeyDown(event) {
  var unicode = getKeyCode(event);
  if (unicode==13) {
    // IE/zbytek světa
    if (window.event)
      event.returnValue = false;
    else
      event.preventDefault();
  }    
}
</script>
Teprve použití event.returnValue = false; (Internet Explorer) a event.preventDefault() (Mozilla, Opera) přináší kýžený výsledek a formulář se při Enteru ve vybraném formulářovém poli neodesílá.



Diskuze:

V dizkuzi nejsou žádné příspěvky.

Vážení čtenáři, nacházíte se v archivované části webu. Diskuze byla uzavřena.


© 2003-2012 Miloš Němec. E-mail: