in einem älteren Artikel (Formulare per ENTER-Taste versenden) habe ich beschrieben welche Möglichkeiten es gibt, die ENTER-Taste in einem Formular zu verwenden, um entweder vor dem Abschicken (Submit) des Formulars Validierungen durchzuführen, mit mehreren Schaltflächen zu hantieren oder sogar gänzlich auf Schaltflächen zu verzichten.
Nun fragte mich ein Leser nach den weiteren Möglichkeiten die ENTER-Taste in Textboxen zu verwenden. Es ging darum eine Textbox bereitzustellen, die beim Drücken der ENTER-Taste den Inhalt auswertet und im Falle einer Url diese aufruft und in allen anderen Fällen die Google-Suche bemüht.
Form-Submit und Einsatz des Action-Attributs
Die einfachste Möglichkeit so etwas hinzubekommen ist ein Form mit einer Textbox txt und einer Submit-Schaltfläche cmd. Im action-Attribut des Forms wird die Javascript-Methode javascript: doSearch(); aufgerufen, die die Validierung durchführt und auf die entsprechende Seite verzweigt:
...
<head>
<script type="text/javascript">
function doSearch() {
sSearchText = document.getElementById('txt').value;
var sUrl;
if (sSearchText != "") {
if (sSearchText.indexOf("http://",0) == -1) {
sUrl = "http://www.google.de/search?hl=de&q=" + sSearchText;
} else {
sUrl = sSearchText;
}
window.location.href = sUrl
}
}
</script>
</head>
<body>
<form id="frm" action="javascript: doSearch();">
<input id="txt" type="text" value="" />
<input id="cmd" type="submit" value="Suche / Gehe zu ..." />
</form>
</body>
...
>>> Demo <<<
(rechte Maustaste -> "Ziel speichern unter" zum Herunterladen)
Die Schaltfläche wird eigentlich nicht benötigt, da durch das action-Attribut der Gebrauch der ENTER-Taste in der Textbox das Formular automatisch "submitted" wird.
Einfache Javascript-Lösung
Die erste Ansatz ist knackig kurz und funktioniert in vielen Fällen wie einfachem HTML oder in PHP-Lösungen. Allerdings haben vor allem ASP.NET-Entwickler damit ein Problem, denn bekanntermaßen besitzt eine ASPX-Seite immer nur ein Form und das action-Attribut zu verwenden kommt schlicht nicht in Frage. Hier muss also eine andere Lösung her.
Aufbauend auf der Lösung in meinem früheren Artikel, ist es möglich jeden Tastendruck in der Textbox zu validieren und auf die ENTER-Taste mit dem Aufruf der Methode doSearch zu reagieren:
...
<head>
<script type="text/javascript">
function doSearch() {
// siehe letztes Beispiel
}
function evaluateSubmit(e) {
var key = null;
if (e.which) {
key = e.which; //normale Browser
} else {
key = e.keyCode; //IE
}
if (key == 13) { //ENTER
doSearch(); //Suche ausführen
return false; //Submit verhindern
} else {
return true;
}
}
</script>
</head>
<body>
<form id="frm" action="">
<input id="txt" type="text" value=""
onkeypress="return evaluateSubmit(event); " />
<input id="cmd" type="button" value="Suche / Gehe zu ..."
onclick="doSearch(); " />
</form>
</body>
...
>>> Demo (mit Formular) <<<
>>> Demo (ohne Formular und Schaltfläche) <<<
(rechte Maustaste -> "Ziel speichern unter" zum Herunterladen)
Wichtig in diesem Beispiel ist die Rückgabe von false durch die Methode evaluateSubmit und im Aufruf über das Attribut onkeypress. Nur dadurch wird das Abschicken des Formulars verhindert. Wenn man allerdings kein Formular einsetzt, kann man auch darauf verzichten (siehe zweite Demo). Die Schaltfläche ist in beiden Fällen obsolet. Man kann sie auch weglassen, wenn man möchte.
Universelle Javascript-Lösung
Kein Programmierer schreibt Code gerne doppelt oder dreifach. Daher ist es sinnvoll beide Javascript-Methoden zu parametrisieren und somit universell einsetzbar zu machen.
Die beiden letzten Beispiele in diesem Artikel sind wohl auch für ASP.NET-Entwickler die interessantesten, denn diese kommen um ein Formular gar nicht herum, d.h. es gibt immer eine Action, die umgangen werden muss.
...mit Schaltfäche
Erster Ansatz ist, die Methode evaluateSubmit so aufzubohren, dass sie per Javascript einen Klick auf eine zugeordnete Schaltfläche ausführt, was uns von der harten Codierung des auszuführenden Ereignisses befreit.
HTML:
<form ...>
...
<input id="txt" type="text" value=""
onkeypress="evaluateSubmit(event, 'cmd'); " />
<input id="cmd" type="button" value="Suche / Gehe zu ..."
onclick="doSearch('txt'); " />
...
</form>
Der Methode doSearch wird nun zusätzlich die ID der Textbox mitgegeben (sSearchField), in dem der zu verarbeitende Text eingeben wurde und evaluateSubmit erhält einen weiteren Parameter sButtonID mit dem die ID der auszuführenden Schaltfläche übergeben wird.
Javascript:
function doSearch(sSearchField) {
sSearchText = document.getElementById(sSearchField).value;
var sUrl;
if (sSearchText != "") {
if (sSearchText.indexOf("http://",0) == -1) {
sUrl = "http://www.google.de/search?hl=de&q=" + sSearchText;
} else {
sUrl = sSearchText;
}
window.location.href = sUrl
}
}
function evaluateSubmit(e, sButtonID) {
var key = null;
var bRetVal = true;
if (e.which) {
key = e.which; //normale Browser
} else {
key = e.keyCode; //IE
}
if (key == 13) { //ENTER
var btn = document.getElementById(sButtonID);
if (btn != null) {
btn.click(); //Klick ausführen
bRetVal = false;
}
}
if (bRetVal == false) {
//weitere Aktionen verhindern
if(e.preventDefault) {
e.preventDefault(); //normale Browser
} else {
e.returnValue = false; //IE
}
}
}
>>> Demo <<<
(rechte Maustaste -> "Ziel speichern unter" zum Herunterladen)
Anstatt in evaluateSubmit einen Rückgabewert zu definieren, wird hier die DOM Level 2-Event-Eigenschaft preventDefault verwendet, die dafür sorgt, dass alle anstehenden Standardaktionen abgebrochen werden. Näheres dazu unter w3.org - Document Object Model Events. Leider gilt Letzteres wiederum nur für Browser, die sich an die Standards halten, also nicht für den Internet Explorer, der es etwas anderes mag.
Man kann aber in jedem Fall im onkeypress-Attribut auf das return verzichten.
...ohne Schaltfäche
Hat man keinen Platz für eine Schaltfläche, kann man der Methode evaluateSubmit die auszuführende Funktion auch als
String mit auf den Weg geben und sie dann mittels eval ausführen, wenn die ENTER-Taste gedrückt wird:
HTML:
<form ...>
...
<input id="txt" type="text" value=""
onkeypress="evaluateSubmit(event, 'doSearch(\'' + this.id + '\')'); " />
...
</form>
Javascript:
function doSearch(sSearchField) {
// siehe letztes Beispiel
}
function evaluateSubmit(e, sFunction) {
var key = null;
var bRetVal = true;
if (e.which) {
key = e.which; //normale Browser
} else {
key = e.keyCode; //IE
}
if (key == 13) { //ENTER
eval(sFunction); //Methode ausführen
bRetVal = false;
}
if (bRetVal == false) {
//weitere Aktionen verhindern
if(e.preventDefault) {
e.preventDefault(); //normale Browser
} else {
e.returnValue = false; //IE
}
}
}
>>> Demo <<<
(rechte Maustaste -> "Ziel speichern unter" zum Herunterladen)
Der Javascript-Code ähnelt dem letzten Beispiel, nur dass nun die eval-Methode zum Einsatz kommt, um den Parameter auszuwerten und nicht mehr ein Klick auf eine Schaltfläche ausgeführt wird.
Der Übergabe des zu evaluierenden Parameters sFunction muss man allerdings etwas Aufmerksamkeit widmen, denn in keinem Fall dürfen die notwendigen Hochkommas fehlen.
Statt über this.id Bezug auf die ID des aktuellen Feldes zu nehmen, könnte man den Namen auch direkt in die Methode schreiben: 'doSearch(\'txt\')'.
In beiden Fällen muss man die inneren Hochkommas mit einen Backslash maskieren, damit sie als Text und nicht als Anweisung intepretiert werden.
Happy coding ;)