Disablovať enter na HTML formulári?

2.6.2011 10:05 | Přečteno: 1364× | Kategorie

Otázka na UX (júsr ikspírijens). Mám HTML formulár. Niektoré položky majú "nápovedu" ktorá sa ťahá z databázy. Proste keď do položky "Mesto" pod textovým imputom začnem prísať "Pr" tak vybehne ponuka s mestami "Praha, Prostějov, Prešov, ..." kde user môže šípkami vybrať ktoré chce a potvrdiť to enterom. Problém je že user keď opustí input mesto a vojde napr. do inputu "Číslo domu" čo je normálny HTML input, a napíše "123" tak má potom tendenciu stlačiť enter čím celý formulár odošle pričom ešte nie je celý vyplnený. Samozrejme mu to zahlási chybu, ale je to otrava. Ako by som s tým mal naložiť?

Oprava: 4. možnosť ankety mala byť Nepoužívať nápovedu, nechať používateľa napísať napr. "Nové Město nad Metují" ale tento systém mi asi zožral všetko za prvou úvodzovkou :(        

Anketa

Komentáře

[Ragzid]

Normalne pouzit tabulator a skocit na dalsi polozku? Pripadne mrkni jak to maji udelane treba na IDOSu...

[Radovan Garabík]

Na výber položky v nápovede použiť niečo iné ako enter. Kliknutie myšou, SPACE. 90% užívateľov aj tak bude klikať myšou, a tí skúsenejší, čo budú používať formulár často sa SPACE naučia.

Ďalšia možnosť je dopĺňať najpravdepodobnejšiu položku rovno do inputu, s tým, že doplnené písmená budú vyselektované - a teda užívateľ bude dezambiguovať dopisovaním písmen. Niečo také, ako to má OpenOffice. Prípadne ako pokročilejšia úroveň by mohli šípky prepínať medzi nápovedami.

[polymorf]

SPACE.

Ako by si spacom napísal Nové mesto nad Váhom/Nové mesto nad metují, po napísaní Nové[space] by to vybralo prvé čo by našlo.

Ďalšia možnosť je dopĺňať najpravdepodobnejšiu položku rovno do inputu, s tým, že doplnené písmená budú vyselektované

To neni zly napad, len este neviem ako sa ten zvoleny text bude chovat pri pisani. Skusim nejake demo...

[Radovan Garabík]

Ako by si spacom napísal Nové mesto nad Váhom/Nové mesto nad metují, po napísaní Nové[space] by to vybralo prvé čo by našlo

Ja som mal inú predstavu:

užívateľovi ponúkne položky POD inputom, pričom fokus zostáva na inputboxe, takže space nie je problém stlačiť. Návrhy sa selektujú až vtedy, keď stlačí šípku dolu.

[Filip Jirsák]

Nejste první, kdo řeší v HTML AJAXové doplňování (našeptávač). Podívejte se, jak to dělají ostatní, a použijte stejný způsob – uživatelé na to budou zvyklí. Podle mne „průmyslový standard“ funguje tak, že se výběrem (např. šipkou) v našeptávacím seznamu rovnou příslušná hodnota doplní do vstupního boxu. Takže uživatel se pak jen tabulátorem přepne na další políčko.

[polymorf]

Tab by mohol byt, s tym ze Esc by vratilo povodnu hodnotu, otestujem...

[Josef Kufner]

Potlač enter jen pokud je našeptávací okýkno pod inputem otevřené. Jakmile zmizí, tak enter poši dál.

input.keydown(function(ev) {
  if (ev.key == 13) {
    if (naseptavac_otevren) {
      naseptavac.close();
      return false;
    } else {
      return true;
    }
  }
});

[polymorf]

Tak to samozrejme mam. Problem je v tom ze ich ucim "enter = vyber hodnoty". Oni potom vo zvyku aj na nenaseptavanych inputoch stlacaju enter cim predcasne odslu formular. Ide o to ci enter potlacit vsade alebo miesto enteru pouzit nieco ine (napr. uz spomenuty tabulator by mohol byt celkom fajn).

[tmr]

Podle me se nauci to, ze enter = vyber hodnoty z naseptavace. Coz je neco jineho nez potvrzeni hodnoty v inputu bez naseptavace. Ale to je jenom teorie - mas odzkouseno v praxi, ze uzivatele opravdu klikaji na enter i v inputech, ktere nemaji naseptavac? Pokud ano, udelal bych to tak, ze enter na vsech inputech posune focus na dalsi prvek, ale na poslednim inputu enter odesle formular. Jenom ze zvedavosti, nemel bys odkaz na ten formular?

[polymorf]

Ano mam, sam som prisiel na nenaseptanu polozku, napisal cislo a stlacil enter. Vzorku nemozem poskytnut lebo je to dost hlboko zadratovane do systemu.

[Josef Kufner]

Tab je na skákání po políčkách a enter na potvrzení právě aktivního výběru.

Tohle pochopí i kdejaká cvičená opice. Samozřejmě ať našeptávač ihned vypluje to políčko, jinak to bude dělat občas zmatky.

• Pokud je formulář jen o tom jednom políčku, tak to rovnou odešli. (např. vyhledávače)
• Pokud je tam nějaké další políčko, ale není moc používané, tak to odešli taky. (např. vyhledávače s filtrem typu obsahu)
• Pokud je to větší, tak jen zavři našeptávač a odešli až při entru bez našeptávače. (plánování cesty, našeptávání zastávek)
• Pokud je to několik málo políček (dvě, tři) a je třeba vyplnit všechny, tak skákej na další a na posledním odešli formulář.

[polymorf]

odešli až při entru bez našeptávače

Toto je prave problem. Formular typicky vyzera tak ze je tam 30 naseptavacich policok, a 5 nenaseptavacich, napr. cisla. User typicky pracuje takto (Enter alebo sipka dole otvori naseptavac, Enter tiez vybera):

1. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
2. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
3. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
4. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
5. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
6. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
7. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
8. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
9. Napise prvych par znakov, Enter alebo sipka dole, sipkami nieco vyberie, enter, tabulator
10. Do obycajneho inputu napise 123, a omylom stlaci enter cim odosle nekompletny formular

[Josef Kufner]

V tom případě nechť enter posune focus na další políčko. Ale ať se tak chová na všech políčkách – tedy nepoužívat ho na otvírání našeptávače, ten ať se otevře sám a rychle.

[Filip Jirsák]

Od Enteru ve formuláři člověk očekává, že formulář odešle – na jakémkoli prvku. Je rozumné dodržovat běžné zvyklosti – uživatelé= nebudou rádi, pokud si budou muset pamatovat, že zrovna tahle aplikace se chová jinak.

[Josef Kufner]

Btw, proč tohle není v programovací poradně?

[polymorf]

Lebo to s programovanim nema vela spolocneho, ani s linuxom.

[Josef Kufner]

A o čem tohle je, když ne o programování? Uživatelské rozhraní není součast programu?

[tmr]

To je o navrhu UI, ne o programovani. Podobne to je s grafickym designem aplikace, taky to je cast programu, ale neni to programovani.

[Josef Kufner]

UI je nutná část programu (pokud zrovna nejde o systémové služby, kde uživatel chybí). Takže i tvorba UI je součást programování. A u většiny programů je UI důležitější než použité algoritmy pod ním.

Zkráceně: Návrh UI je podmnožinou programování a proto to patří do programovací poradny.

[tmr]

Implementace UI je programovani. Navrh UI (kresleni na papire) neni programovani. Vymysleni jak aplikace bude vypadat, jake bude mit funkce atd. je jedna vec, naprogramovani toho co jsem vymyslel je druha vec.

[Josef Kufner]

V tom případě můžem programovací poradnu zrušit, protože už se v ní není na co ptát. A vlastně už se ani není třeba programováním zabývat, protože se při něm vůbec nic neděje.

[tmr]

To sem asi uplne nepochopil... ale souhlasim, ze bych programovaci poradnu zavrel, kdyz tu je stackoverflow.

[rADOn]

Podle téhle logiky dotaz na Qt taky není o programování… Dotaz na algoritmizaci taky není programování… Založíme speciální UI poradnu, matematickou poradnu etc jen kvůli uspokojení katalogizačního komplexu? Kravina, dotaz je o tvorbě programu, v programovací poradně nikomu neublíží. Aspoň by tam jednou pro změnu byl problém který se jeho autor obtěžoval pořádně popsat.

[tmr]

Ale dotaz na Qt nebo na algoritmizaci ma k programovani mnohem mnohem bliz nez vymysleni UI. Na stackoverflow.com by tuhle otazku zavreli popr. presunuli na ux.stackexchange.com.

[tmr]

BTW nevim jestli je dobry ptat se na UX na Linuxovem serveru, kde polovina lidi povazuje UX za sproste slovo / PR speak / buzzword

[__dark__]

Tak povol enter jen na tlačítku "Submit", pokud s tím jsou problémy, nebo přidej na stránku validátor, který zabrání odeslání formuláře, který není vyplněný (toto bych asi udělal já).

[mess]

Nemusíš to zakazovat na všech inputech, stačí na formuláři v onsubmit. Samozřejmě nějak chytře, aby ten formulář šel odeslat

[Pablo]

v jQuery: $("#dalsi_input").keydown(function(event) { if (event.which == 13) { event.preventDefault(); } // eventualne $("#jeste_dalsi_input").focus(); });