[JS] Enter key cross-browser cancellen

[Bozozo]

Ik heb hier een pagina met wat invoerveldjes erop (niet het upload formulier, maar de pagina waar je daarna uitkomt).

Ik wil het onmogelijk maken om dit formulier te submitten met de enterknop. Dit is niet zo moeilijk, tenzij je het cross-browser wilt doen. Als je het onKeyDown event gebruikt werkt deze code in IE7, FF2 en Safari 3:

JavaScript:

function handlefieldchange(e) {
    e = e || window.event;
    if (e.keyCode==13) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        return false;
    }
}

Echter, in Opera kun je het KeyDown event niet blokkeren. Ook stopPropagate en cancelBubble hebben geen effect. Je kunt wel het KeyPress event dan weer wel blokkeren in Operam maar dan geeft Firefox de waarde '0' voor de keyCode, ongeacht welke knop is ingedrukt.

Wat is nou de beste cross-browser manier om dit op te lossen? Ik wil liever niet UA sniffen om Opera te detecteren, want dat is niet altijd betrouwbaar.

Volgens mij vertoont IE6 trouwens hetzelfde gedrag als Opera, maar dat weet ik niet zeker.

[kalizec]

Misschien een idee (geen idee of het de beste oplossing is).

Je kunt input elementen ook in een form plaatsen dat niet submit-baar is. Vervolgens kun je een submit-knop maken met daaraan een stuk JS dat de boel overzet naar geen geheel hidden stel inputs en dat die submit. Daarmee kan de gebruiker feitelijk zonder die JS het form nooit submitten.

[Bozozo]

Op zich zou dat kunnen, maar ik vind het te omslachtig voor het repareren van één commando dat niet werkt in één browser.

Ik zou liever iets hebben in de trant van
if (deze_browser_ondersteunt_het_cancellen_van_keydown) addEvent(element, onkeydown, functie);
else addEvent(element, onkeypress, functie);

[Xcalibur]

Waarom zou je dit willen?
Het overrulen van de basisfunctionaliteit van de browser is zelden een goed idee, ik vraag me daarom ook af wat hier de toegevoegde waarde van is?

Overigens: geen submitknop maken maar een button met een javascript onclick = submit() lijkt me de gemakkelijkste optie

[Bosmonster]

Kweet niet of je er iets aan hebt, maar Mootools doet het zo:

JavaScript:

    /*
    Property: stop
        cross browser method to stop an event
    */

    stop: function(){
        return this.stopPropagation().preventDefault();
    },

    /*
    Property: stopPropagation
        cross browser method to stop the propagation of an event
    */

    stopPropagation: function(){
        if (this.event.stopPropagation) this.event.stopPropagation();
        else this.event.cancelBubble = true;
        return this;
    },

    /*
    Property: preventDefault
        cross browser method to prevent the default action of the event
    */

    preventDefault: function(){
        if (this.event.preventDefault) this.event.preventDefault();
        else this.event.returnValue = false;
        return this;
    }

[Michali]

Ik zou dit met een onsubmit event oplossen. Gewoon een vlaggetje zetten voordat je dan zelf submit, zodat het wel toegestaan wordt en dan in de onsubmit de waarde van dat vlaggetje returnen.

[.oisyn]

Bozozo schreef op maandag 24 maart 2008 @ 16:52:
Echter, in Opera kun je het KeyDown event niet blokkeren. Ook stopPropagate en cancelBubble hebben geen effect. Je kunt wel het KeyPress event dan weer wel blokkeren in Operam maar dan geeft Firefox de waarde '0' voor de keyCode, ongeacht welke knop is ingedrukt.

Obvious oplossing: zowel keyDown als keyPress door dezelfde handler laten gaan

[Bozozo]

@Xcalibur: ik heb in dit geval een goede reden om de basisfunctionaliteit te veranderen. Als iemand de fontgrootte of letterspacing aanpast dan kan dat meteen in de browser worden aangepast door Javascript. Als het formulier wordt verstuurd dan moet de pagina opnieuw serverside worden opgebouwd en verzonden; zonde van de tijd en zonde van mijn bandbreedte. Mensen zonder javascript worden naar een andere pagina geleid, zodat zij dezelfde functionliteit krijgen (maar wel het form moeten submitten).
Over het weghalen van de submitknop: Opera voert vrolijk een submit uit als je op enter drukt, zelfs als er geen submit knop in het formulier zit

@ Bosmonster: dankjewel! Ik was de preventDefault functie vergeten. Daarmee moet het wel gaan lukken denk ik.

@Michali: da's een goed idee. Ik ben over het algemeen niet zo'n fan van vlaggetjes (wordt al snel overzichtelijk) maar als het op geen enkele andere manier lukt dan is het zeker een goede optie.

@.oisyn: de code die ik gepost heb is maar een knipseltje; in werkelijkheid wordt er in de handler vanalles uitgevoerd. Als dat zowel op keypress als op keydown gebeurt loopt de boel in de soep. Uiteindelijk zou jouw oplossing wel werken met gebruik van een vlaggetje of meerdere event listeners oid, maar ik denk dat het niet de goede oplossing is.

[Xcalibur]

Bozozo schreef op dinsdag 25 maart 2008 @ 15:22:
@Xcalibur: ik heb in dit geval een goede reden om de basisfunctionaliteit te veranderen. Als iemand de fontgrootte of letterspacing aanpast dan kan dat meteen in de browser worden aangepast door Javascript. Als het formulier wordt verstuurd dan moet de pagina opnieuw serverside worden opgebouwd en verzonden; zonde van de tijd en zonde van mijn bandbreedte. Mensen zonder javascript worden naar een andere pagina geleid, zodat zij dezelfde functionliteit krijgen (maar wel het form moeten submitten).
Over het weghalen van de submitknop: Opera voert vrolijk een submit uit als je op enter drukt, zelfs als er geen submit knop in het formulier zit

Ok, helder

Dat Opera toch submit was me niet bekend, vraag me toch af op basis waarvan hij dan vindt dat dat moet

[Michali]

Bozozo schreef op dinsdag 25 maart 2008 @ 15:22:
@Michali: da's een goed idee. Ik ben over het algemeen niet zo'n fan van vlaggetjes (wordt al snel overzichtelijk) maar als het op geen enkele andere manier lukt dan is het zeker een goede optie.

Nou, als het al snel overzichtelijk wordt, dan zou ik het maar veel gaan toepassen!

Nee, maar serieus. Je moet ze natuurlijk op de juiste manier binden. Closure is sowieso wel gewenst denk ik, zodat het vlaggetje geen globale variabel wordt, maar beperkt blijft binnen de scope van de betreffende functies.