Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon abschweb vom 24.03.2021, 10:29 Options

Enter-Taste in HTML-Formular

Hallo Experten,

ich habe ein HTML-Formular, das auch ganz gut funktioniert.
Enthalten sind unter anderem: Ein Listenfeld und ein Knopf, der entsprechend der Wahl im Listenfeld eine Javascript-Funktion aufruft. Im Listenfeld wird ondblclick ebenfalls diese Funktion aufgerufen. Die Mausbedienung lässt also keine Wünsche offen. Schön wäre es jetzt, wenn das auch mit der Entertaste erreicht werden könnte, wenn der Fokus im Listenfeld steht. Gibt es dafür eine einfache Lösung?

Danke,
Manfred

Antwort schreiben

Antwort 1 von Supermax vom 24.03.2021, 10:38 Options

es gibt das Event "onkeypress", "onkeydown" und "onkeyup", die du für diesen Zweck verwenden kannst.

Antwort 2 von abschweb vom 24.03.2021, 12:04 Options

Danke, ich hab die jetzt auch in SelfHTML gefunden.
Nicht gefunden habe ich dort (in keinem der Beispiele kommt das vor), wie ich im Event-Handler die Tasten voneinender unterscheiden kann.

Antwort 3 von Supermax vom 24.03.2021, 12:07 Options

Wenn du englisch kannst, empfehle ich dir dieses Kapitel auf quirksmode.org

Antwort 4 von abschweb vom 24.03.2021, 12:38 Options

Hab mich erinnert, ähnliches schon mal gemacht zu haben.

hab als Event-Handler jetzt:


function checkEnter (Taste)
{
if (((event) ? event.keyCode : Taste.which) == 13)
    geh_hinein ();
}

Ist halt lausig, dass man dabei wohl immer zwischen den Browsern unterscheiden muss.

Im IE klappt das.

Im FF kann ich es wegen eines anderen Problems noch nicht testen.

Manfred

Antwort 5 von katy vom 25.03.2021, 00:45 Options

Zitat:
Schön wäre es jetzt, wenn das auch mit der Entertaste erreicht werden könnte, wenn der Fokus im Listenfeld steht.

wenn die JavaScript-Funktion im onsubmit-Event des Formulars steht und dein Button eigentlich ein Submit-Button ist, ist ein onkey... -Event nicht mehr nötig, denn den onsubmit-Event ruft das Formular automatisch bei Betätigung der Enter-Taste auf.

katy

Antwort 6 von son_quatsch vom 25.03.2021, 08:04 Options

Zitat:
denn den onsubmit-Event ruft das Formular automatisch bei Betätigung der Enter-Taste auf.

Sollte (zumindest gemäß Windows-GUI) so sein, ist aber nicht in allen Browsern der Fall. Aber ok - in den meisten und am meisten verbreiteten ;-)

Verbunden mit der oben exzellent empfohlenen Seite müsste das Beispiel so aussehen, damit es in allen Browsern funktioniert (verknüpft im onKeydown-Event):

function checkEnter( e ) {
  var e1= e|| window.event;
  if ( e1.keyCode== 13 ) mach_sonstwas();
}

Antwort 7 von abschweb vom 25.03.2021, 09:44 Options

@son_quatsch
Deine Funktion sieht meiner (Antwort 4) sehr ähnlich.
Die Konstruktion

var e1 = e || window.event;

hätte ich bisher nicht gewagt, sieht verwegen aus, die gleichzeitige Verwendung als Boolean und als Objekt, aber warum nicht, hat was.

@katy
Zum Submit machen macht keinen Sinn, weil das Ganze zweistufig ist, also nacheinender zwei verschiedene Knöpfe diese Rolle bekommen.

Antwort 8 von Supermax vom 25.03.2021, 10:15 Options

Ich verwende statt diesem Konstrukt meistens folgendes:

function ein_eventhandler(evt) {
   if (window.event) evt = window.event;
   // Rest der Funktion ....
}

Antwort 9 von abschweb vom 26.03.2021, 11:01 Options

Ich habe jetzt eine Testdatei erstellt:
http://www.abschweb.de/test/ziel.htm
Das Tastenproblem ist jetzt zweitrangig.
Im IE funktioniert es in allen Variationen.
Im FF scheitert es beim Klicken auf "suchen".
Die Ergebnisliste wird zwar für einen Bruchteil einer Sekunde ins Ausgabefeld gestellt, verschwindet aber wieder. Ich finde den Fehler nicht!

Antwort 10 von abschweb vom 27.03.2021, 10:22 Options

Sorry das sich das Problem gewandelt hat.
Wäre es sinnvoll, einen neuen Thread aufzumachen?
Einstweilen mach ich hier weiter.

Das Problem lautet also jetzt:
Warum reagiert der FF in Formularen so seltsam?
Gibt es Abhilfe?

Ich hab das Problem jetzt auf seinen Kern reduziert:
http://www.abschweb.de/test/select.htm
Während der IE wie erwartet beim Klick auf den Knopf die Liste präsentiert, lädt der FF schnöde die Webseite neu, erkennbar an der Init-Meldung.

Manfred

Antwort 11 von son_quatsch vom 27.03.2021, 10:53 Options

Das war jetzt sehr viel besser testbar. Nicht nur der Firefox, sondern mindestens auch Opera (und sicherlich noch mehr Browser) reagieren nicht "seltsam", sondern richtig. Das liegt u.U. schon an dem nicht vorhandenen aber erwartetem Attribut action="" im Form-Element.

Ändere die Zeile

<button onClick="machListe ()">mach Liste</button>

um in

<button onClick="machListe(); return false;">mach Liste</button>

...damit wird nämlich verhindert, dass die Form auch abgeschickt wird.

Antwort 12 von abschweb vom 27.03.2021, 13:04 Options

Danke, son_quatsch.

Das mit dem return false hats gebracht
und action="" hab ich auch eingefügt.
Im FF funktioniert jetzt die Mausbedienung.
Zurück also zum Problem der Tastaturbedienung.

http://www.abschweb.de/test/ziel.htm

Im IE läufts. Im FF scheinen die Funktionen checkSuchEnter () und checkTrefferEnter () nicht einmal aufgerufen zu werden.
Was könnte das jetzt sein?

Manfred

Antwort 13 von abschweb vom 01.04.2021, 11:20 Options

Ich bin immer noch vom Firefox irritiert.
Ich habe zwei Testdateien erstellt:

In http://www.abschweb.de/test/taste.htm rufe ich die Funktion Check () dokumentweit onkeypress.
Hier ist im FF der Tastencode verfügbar.

In http://www.abschweb.de/test/form.htm rufe ich die Funktion Check () onkeypress im Eingabefeld
Hier weiß ich nicht, wie ich im FF an den Tastencode rankommen soll.

Antwort 14 von katy vom 01.04.2021, 13:37 Options

da hat dir die veraltete Syntax mit den Aufrufen über Attribute in den Tags einen Strich durch die Rechnung gemacht.

So klappts bei mir:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form Test</title>

<script type="text/javascript">
function Check (Taste)
{
if (typeof (Taste) == 'object')
    alert ('Netscape: ' + Taste.which)
else
    if (typeof (event) == 'object')
        alert ('Microsoft: ' + event.keyCode)
    else
        alert ('nix?');

return false;
}

window.onload=function ()
{
with (document)
    {
    Formular.Eingabe.focus ();
    }
document.getElementById("Eingabe").onkeypress=Check;
}

</script>
</head>
<body>
<form name="Formular" action="">
<input id="Eingabe" size=20 >
</form>
</body>
</html>

katy

Antwort 15 von abschweb vom 01.04.2021, 17:54 Options

Danke, katy,
aber ich sehe weder, was daran veraltet sein soll, dass das Ereignis beim Eingabefeld beschrieben wird, wie es der IE immer akzeptiert und auch der FF in allen anderen Fällen, wo nicht vom System ein Parameter zur Laufzeit reingetrickst werden muss,
noch sehe ich es als besonders modern und praktisch an, dass es nur hinterrücks über DOM-Javascript gehen soll, so schön das auch ist, dass man damit alles und jedes nachträglich manipulieren kann, wenn man das will und braucht.

In der Testdatei funktionierts so auf Anhieb, in der echten Datei nicht, aber ich bin dran.

Manfred

Antwort 16 von katy vom 01.04.2021, 20:10 Options

Ein einfaches "Danke" hätte auch gereicht. Wenn dir meine Lösung so wenig gefällt musst du sie ja nicht nutzen.

Aber nach dem Angepflaume hier wundere dich bitte nicht, wenn ich mich mit weiteren Tipps zurückhalte.

katy

Antwort 17 von abschweb vom 01.04.2021, 22:35 Options

katy,
es sieht so aus, dass es zu deiner Lösung keine Alternative gibt.
Eine Lösung, die funktioniert ist eine gute Lösung. Aber ich sehe sie als guten Trick, um die Unzulänglichkeiten des Firefox auszubügeln - als eine Arbeitslösung. Du solltest stolz sein, dass du weißt, wie man die ausbügelt. Ein ganz dickes Lob! Dich anzupflaumen war definitiv nicht meine Absicht!

Manfred

Antwort 18 von katy vom 02.04.2021, 06:34 Options

Um einiges klarzustellen:

Meiner Kenntnisse im Thema JavaScript bin ich mir selbst sehr bewusst.

Das ist kein Trick, sondern die gängige Syntax. Spätestens bei solchen komplexen Vorhaben wie Event-Bubbling greift die Einbindung über Tag-Attribute nicht mehr.

Ich bügle meine Skripte grundsätzlich nicht!

katy

Antwort 19 von abschweb vom 02.04.2021, 08:12 Options

ok, nehmen wir einmal an, das W3C würde nur noch diese Art der Event-Einbindung zulassen. Ich würde dann die einfache Möglichkeit vermissen, auf das eigene Objekt zuzugreifen.
also derart:

<button onclick="mach (this)"></button>

Ohne diese Parameterübergabe müsste ich einen Zugriff auf das eigene Objekt innerhalb der Handlerfunktion aus der Dokumentwurzel herleiten.
Das hätte m.E. zur Folge, dass es nicht mehr möglich wäre,
die selbe Handlerfunktion an mehrere Objekte zu binden,
Oder sehe ich da was falsch?

Antwort 20 von Supermax vom 02.04.2021, 08:33 Options

Soweit ich weiss hast du auch mit

element.onevent = function(blub) { ... }

Zugriff auf das Element selbst über die Variable "this".

« Zurück
1
2
Weiter »

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken