<div> Bei Escape verschwinden lassen

html.de-Forum JavaScript
1

Hallo,

ich habe leider mal wieder ein Problem, und zwar bastle ich mir ja gerade eine Suchfunktion für meine HP, und das klappt auch ganz gut (mit DOM-Befehlen).

Die Ergebnisse werden in einer absolut positionierten

angezeigt. Jetzt möchte ich, dass diese
bei Drücken von Escape geschlossen wird. Versucht habe ich:

[code]

..
[/code]closeDiv() schließt wie zu erwarten die Div, und diese Methode funktioniert nachweislich, wenn ich sie mit nem onclick ausführe klappt alles. Trotzdem bleibt die
visible.

Einen Fehler zeigt mir die FF-Fehlerkonsole nicht an, und die Notation scheint zu funktionieren, im Suchfeld verwende ich zum Beispiel:

<input id="suche" type="text" onkeypress="if(event.keyCode==13) initSearch('suche');" name="Suchfeld">

Dann sucht er auch beim Drücken von Enter automatisch und man muss nicht erst auf den „Suchen“-Button klicken.

Kann mir jemand helfen?

Vielen Dank,
Jens

2

Firefox und IE behandeln Events verschiedenen.
Der Firefox und auch andere Browser wie Opera usw kennen das window.event Objekt nicht. Sie geben der Funktion einen Parameter mit in denen sich das Event Objekt befindet.
Kannst dir also einen Wrapper schreiben

Nehmen wir mal an du lässt dein closeDiv einfach direkt aufrufen. Dann fragst du da drinnen ab:


function closeDiv(e) {
  var e = (window.event) ? window.event : e;
  if(e.keyCode == 27) {
    // Was immer du amchen wolltest
  }
}
3

Hallo Gilles,

danke für den Tip! Aber diese Syntax mit dem Fragezeichen kenn ich gar nicht, was bedeutet die genau?

//edit: Und bei mir kommt dann ein Fehler, wenn ich eine Taste drücke: e is undefined

Mein Code:

<body onkeypress="check(e);">

und

function check (e) {

    var e = (window.event) ? window.event : e;
    if (e.keyCode == 27) {
        closeResults();
    }

}

Gruß
Jens

4 
<body onkeypress="check(event || window.event);">

function check (e) { if (e.keyCode == 27) { closeResults(); } }

5

Perfekt, es läuft!

Aber kann mich jemand noch kurz auf diese „var e = (window.event) ? window.event : e;“-Syntax stoßen, vllt mit einem Link, einer kurzen Erklärung oder einem Stichtwort?

Und auch die „“-Syntax hab ich noch nie gesehen… Selbiges wie oben :slight_smile:

6

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/Conditional_Operator
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Logical_Operators#Logical_OR_(.7c.7c)

7

Ich erklär es auch nochmal auf Deutsch.

Variable = (Wenn Bedingung) ? Dann Setze mich : Ansonsten mich;

Das heisst wenn die Bedingung erfüllt ist, hat die variable den Wert nach dem ?. Wenn nicht nimmt er den Wert nach dem :
Hoffe das ist klar :slight_smile:

8

Das ist doppelt gemoppelt. In Inline HTML Events muss das Eventobjekt explizit übergeben werden werden und das heißt in allen Browsern gleich „event“.

9 
document.onkeypress=function(key)
{
	key = !key ? event:key;
	code = key.keyCode ? key.keyCode:key.which;
	if(code==27)
		remove();
}
10

Hallo,

danke für die Hinweise. Läuft jetzt problemlos. Aber wo lerne ich sowas? selfHTML ist da teilweise nicht so hilfreich finde ich… Gibt es da was Aktuelleres?

Gruß
Jens

11

Das stimmt. Aber das ist nicht in allen Browsern gleich.

Bei DOM-Events-kompatiblen Browsern ist das Event-Objekt im Kontext vorhanden; im IE nicht. Da wird einen Kontext höher geguckt, ob die Eigenschaft „event“ gefunden werden kann. Und dieser höhere Kontext ist „window“, weshalb dort window.event gefunden wird. Das zu Erklärung.

Deshalb reicht, wie struppi richtig sagte, folgendes:
[HTML][/HTML]
Man könnte jetzt noch streiten, welche Variante schneller ist.

12

Eine Seite wo JS Event gut erklärt werden, ist diese Javascript events

13

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference
https://developer.mozilla.org/en/Gecko_DOM_Reference

14

Vielen Dank!

15

Ich habe jetzt als Code:

[FONT=monospace]<body onkeypress="check(event);">
<!-- Jetzt der Javascript-Teil -->

[/FONT]function check (e) {

    // Escape: Suche schließen, klappt
    if (e.keyCode == 27) {
        closeResults();
    }
    
    // F2: Suche anzeigen, klappt nicht
    if (e.keyCode == 113) {
        showSearchForm();
    }

}

Klappt gut im Opera und FF, aber der IE8 realisiert das Drücken von F2 nicht… Warum?

16

[CODE]function check (e) {

// Escape: Suche schließen, klappt
if (e.keyCode == 27) {
    closeResults();
}

// F2: Suche anzeigen, klappt nicht
if (e.keyCode == 113) {
    showSearchForm();
}

if (typeof e.preventDefault == "function") {
    e.preventDefault();
} else {
    e.returnValue = false;
}

}[/CODE]
Würde mir jetzt einfallen. Evtl ist das auch aus Sicherheitsgründen inzwischen verboten im IE.

17

Hallo, danke für die Antwort, klappt aber leider nicht…

Ist es grundsätzlich eine schlechte Idee, F2 dafür zu verwenden? Ich mag halt den Gedanken, dass die Suchfunktion über eine Taste aufrufbar ist… Und warum stellt das eine Sicherheitslücke dar?

Gruß
Jens

18

Mal statt onclick, onkeypress probiert?

19

Hm? onkeypress verwende ich ja. Und onclick ergibt wenig Sinn.

Aber: Von dir inspiriert habe ich aber mal onkeydown verwendet, und siehe da, es läuft im IE. Verrückte Welt. Aber ich danke für die Anregung. :slight_smile:

Warum kann ich F2 abfragen mit onkeydown aber nicht mit onkeypress?

20

Ich meinte auch onkeydown. Warum? Frag Microsoft. Hier gibt’s dazu einen Artikel: JavaScript Madness: Keyboard Events