[IE8] enter toets werkt niet in Form - Softwareontwikkeling

dinsdag 15 september 2009 14:09

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Situatie schets
Ik heb een form (2 velden en een submit knop) die standaard op display:none staat en tijdens de onLoad op display:block wordt gezet. Verder niks spannends en werkt allemaal prima in FF3, IE6, IE7, chrome.

Het probleem
Echter, in IE8 levert dit het probleem dat de enter-toets in een textveld om de form te submitten niet meer werkt. De submit knop werkt wel als je erop klikt. Als ik IE8 in IE7 compatibility-mode draai werkt het wel.

Oorzaak
Na veel testen ben ik erachter gekomen dat het geheel wel werkt in IE8 als ik vanaf aanvang display:block heb staan en deze dus niet meer tijdens de onLoad wijzig.

Workaround
Ik heb inmiddels al een paar workarounds bedacht, maar vroeg me af of er geen betere is.

Een onkeydown aan elke textfield toevoegen en daarin de juiste functie aanroepen als enter. Heb dit nog niet getest maar denk dat ik dan 2 submit events binnen krijg (naast het feit dat ik het geen mooie oplossing vind om in al mijn forms dit soort wijzigingen toe te gaan voegen).
Een <button> element toevoegen die in zijn onclick een submit uitvoert. Raar genoeg krijgt de button de focus en triggert een enter dus de actie van het button. Probleem is echter dat dit weer niet werkt in de andere browsers dus moet ik dit combineren met een submit knop, en om te voorkomen dat er 2 buttons zijn moet ik de <button> onzichtbaar maken voor de gebruiker. Dat is dan ook meteen probleem 2, want door display:none of visible:hidden op de button te gebruiken werkt de enter weer niet .
In de header de meta-tag opnemen om IE8 te forceren in IE7 compatibility mode te draaien, maar dat wil ik juist niet omdat dit dan geldt voor mijn hele pagina en ik wil wel compatible blijven met de nieuwste browsers.

Op google heb ik er vooralsnog niks over kunnen vinden maar kan me niet voorstellen dat ik de eerste ben die er tegen aan loop. Weet iemand hier meer over, of is dit soms een veiligheidsmaatregel van IE8 om geen enters te vangen als het form niet initieel zichtbaar is?

Edit:
Dit is de code om de situatie te reproduceren: De enter werkt dan niet meer (in IE8). Als #test css display none veranderd in block dan werkt ie dus wel.

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css"> 
#test { 
    display: none; 
}  
</style>  
<script type="text/javascript">  
onload = function() {  
    document.getElementById('test').style.display = 'block';  
}  
</script>  
</head>  
<body>  
<form id="test" method="get" action="javascript:alert('woei!')">  
    <input type="text" name="user" value="">  
    <input type="password" name="pw" value=""> 
    <input type="submit" value="submit" id="submit">  
</form>  
</body>  
</html>

[ Voor 16% gewijzigd door Verwijderd op 15-09-2009 17:14 ]

dinsdag 15 september 2009 14:16

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Na veel testen ben ik erachter gekomen dat het geheel wel werkt in IE8 als ik vanaf aanvang display:block heb staan en deze dus niet meer tijdens de onLoad wijzig.

Waarom zet je het form uberhaupt pas na de onload op display: block?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 15 september 2009 14:37

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

BtM909 schreef op dinsdag 15 september 2009 @ 14:16:
[...]

Waarom zet je het form uberhaupt pas na de onload op display: block?

Dit heeft 3 redenen.
Ten eerste laad ik een applet in en wil ik pas dat het form zichtbaar is nadat de applet is ingeladen. Dit heeft ook weer 2 redenen, de applet detecteert of er een smartcard is ingevoerd en laat op basis hiervan een andere form zien. Daarnaast krijgt dan de textfield (soms) geen focus als de applet te laat wordt ingeladen. Schijnbaar krijgt de applet dan de focus en is deze met geen mogelijkheid (.focus() calls in timeouts) weer terug te krijgen naar het textfield.

Ten tweede wil ik het form verticaal centreren en hier is in CSS geen goede manier voor. Dit doe ik door met javascript de hoogte van de body in te lezen en de margin-top van het form op de berekende waarde te zetten.

Ten derde (dit geldt voor de andere forms in mijn app) staan alle forms op dezelfde pagina en wordt er dmv events bepaald welke divs er zichtbaar zijn ipv pagina transities.

dinsdag 15 september 2009 14:45

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Hier even geprobeerd en werkt prima in IE8. De enter knop werkt zelfs prima als de submitknop nog op display:none staat.

Denk dat je het ergens anders moet zoeken dus.

dinsdag 15 september 2009 14:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bosmonster schreef op dinsdag 15 september 2009 @ 14:45:
Hier even geprobeerd en werkt prima in IE8. De enter knop werkt zelfs prima als de submitknop nog op display:none staat.

Denk dat je het ergens anders moet zoeken dus.

Wat heb je geprobeerd bosmonster? Een form aangemaakt en die in de onLoad van display:none naar block veranderd?

dinsdag 15 september 2009 14:55

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Heb je hetzelfde fenomeen als je de display op block zet en onDomReady uitzet (en vervolgens weer aan)? Oftewel: is de initiële state van belang?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 15 september 2009 15:05

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Verwijderd schreef op dinsdag 15 september 2009 @ 14:51:
[...]

Wat heb je geprobeerd bosmonster? Een form aangemaakt en die in de onLoad van display:none naar block veranderd?

Verschillende combinaties. Standaard none, onload naar block en andersom. Allemaal blijft gewoon prima werken in IE8.

Testcaseje dat ik gebruikte:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#submit {
    display: none;
}
</style>
<script type="text/javascript">
onload = function() {
    document.getElementById('submit').style.display = 'block';
}
</script>
</head>
<body>
<form method="get" action="javascript:alert('woei!')">
    <input type="text" value="">
    <input type="submit" value="submit" id="submit">
</form>
</body>
</html>

[ Voor 43% gewijzigd door Bosmonster op 15-09-2009 15:06 ]

dinsdag 15 september 2009 15:17

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

BtM909 schreef op dinsdag 15 september 2009 @ 14:55:
Heb je hetzelfde fenomeen als je de display op block zet en onDomReady uitzet (en vervolgens weer aan)? Oftewel: is de initiële state van belang?

Hmm heb nu ook een testpagina gemaakt met een simpele html form en een onload functie die de display van none naar block omzet en dan doet de enter het nog steeds in IE8. (

)

Had op mijn eigen code alles een voor een lopen uitcommentarieren om te bepalen waar het nou aan lag en kwam zo bij het dynamisch zetten van de display style. Vreemd dat dit in mijn app de enter breekt maar kennelijk dus niet de oorzaak van het probleem kan zijn omdat het wel werkt in de testpagina. Zal meer forensics moeten doen om het probleem nader te bepalen..

Tnx iig voor het proberen

@Btm909
Net getest in mijn app en het maakt dus niet uit wanneer display op none wordt gezet. Als hij initieel op block staat en ik hem tussendoor op none zet dan doet de enter het nog steeds niet.

dinsdag 15 september 2009 17:11

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goed, ik heb het inmiddels kunnen reproduceren in een simpel testpaginaatje. Heb de code hieronder gepost.

@bosmonster
Je code doet niet precies wat ik bedoel. Heb het nu aangepast om mijn situatie weer te geven.
Ten eerste geldt de display: none voor op het form.
Ten tweede heb ik twee (of meer) velden.

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css">
#test {
    display: none;
} 
</style> 
<script type="text/javascript"> 
onload = function() { 
    document.getElementById('test').style.display = 'block'; 
} 
</script> 
</head> 
<body> 
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value=""> 
    <input type="password" name="pw" value="">
    <input type="submit" value="submit" id="submit"> 
</form> 
</body> 
</html>

Edit:
Als #test css display none veranderd in block dan werkt ie dus wel.
Vreemd is ook dat als er maar 1 textfield in staat, dan werkt het ook.

[ Voor 7% gewijzigd door Verwijderd op 15-09-2009 17:15 ]

woensdag 16 september 2009 10:32

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb inmiddels een goede oplossing gevonden (dus geen lelijke onKeyDowns of onzichtbare buttons met focus).

In plaats van het input (type=submit) element te gebruiken, gebruik het button element. Dan werkt het wel in IE8 (en IE6, IE7 en FF3)

.

Zie code hieronder (regel 19 is veranderd):

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css"> 
#test { 
    display: none; 
}  
</style>  
<script type="text/javascript">  
onload = function() {  
    document.getElementById('test').style.display = 'block';  
}  
</script>  
</head>  
<body>  
<form id="test" method="get" action="javascript:alert('woei!')">  
    <input type="text" name="user" value="" />  
    <input type="password" name="pw" value="" /> 
    <button type="submit" value="submit" id="submit">submit</button>  
</form>  
</body>  
</html>

Pagina: 1

Reageer