• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] focusout nur innerhalb des Dokumentes

N

Nalia

New member
Hallo ihr Wissenden,

ich habe ein Eingabefeld, das einen Wert erwartet und diesen nach dem Verlassen des Feldes in der Datenbank auf Vorhandensein überprüft (focusout). Das Eingabefeld erhält den Focus direkt beim Aufruf (document.ready...). Ist der Wert in der Datenbank vorhanden, hält JS das Dokument an und erwartet einen anderen Wert. Bei korrekter Eingabe werden die Daten gespeichert und das Dokument für neue Eingabe erneut aufgerufen (Fokus wieder ins erste Feld).

Das klappt alles wunderbar. Leider ist da ein kleiner Schönheitsfehler. Irgendwann hat man genug Daten eingegeben und will etwas anderes machen. Aber sobald man irgendwo anders hinklickt, erscheint immer der Hinweis, dass das erste Feld eine Eingabe erwartet. Gibt es eine Möglichkeit, dieses 'focusout' auf einen bestimmten Bereich im Dokument zu begrenzen, sprich wenn ich auf einen anderen Browsertab oder auf einen anderen Link in der Navigation klicke, dass die Alert-Meldung dann nicht stattfindet?

Script ist simple, aber ich poste es hier trotzdem kurz:

Code: 
$('#feld1').focusout(function() {
   if (!$('#feld1').val()) {   
      alert('Gib einen Namen ein!');
   }
})
Es grüßt
Nalia, die Unwissende
 
Nalia schrieb:
Gibt es eine Möglichkeit, dieses 'focusout' auf einen bestimmten Bereich im Dokument zu begrenzen, sprich wenn ich auf einen anderen Browsertab oder auf einen anderen Link in der Navigation klicke, dass die Alert-Meldung dann nicht stattfindet?
Zum Vergrößern anklicken....
Zumindest bei der Navigation geht das relativ einfach, indem du auf das Navigationselement ein onclick machst mit event.stopPropagation().
Quatsch, das verhindert ja das Verlieren des Fokus nicht...
 
Zuletzt bearbeitet:
Das kommt soweit mir bekannt von dem event-bubbling. Eine Alternative wäre alle Focus-Events auszuwerten und nur wenn vom gewünschten Element verursacht eine Aktion ausführen, ungefähr so (ungetestet):
Code: 
$(document).on('focus', 'body', (function() {
  var element = false;
  return function(e) {
    if ($(this).closest('#feld1').length)
      element = true;
    else {
      if (element)
        alert('Gib einen Namen ein!');
      element = false;
    }
  };
 });
Ansonsten mal diese Plugin (Outside Events) von Ben Alman anschauen. Das funktioniert für die Events: clickoutside, dblclickoutside, focusoutside, bluroutside, mousemoveoutside, mousedownoutside, mouseupoutside, mouseoveroutside, mouseoutoutside, keydownoutside, keypressoutside, keyupoutside, changeoutside, selectoutside, submitoutside
 
Ich würde ja da nicht sowas Kompliziertes machen, sondern das alert() austauschen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
input + .error {
	display: none;
}
input.error {
	border-color: red;
}
input.error + .error {
	display: inline;
	background-color: pink;
	margin: 3px;
	border: 1px solid red;
	color: darkred;
}
</style>
</head>
<body>
<label>
	<input id="name"><span class="error">Gib einen Namen ein!</span>
</label>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
(function(){
	var name = kkjs.$("name");
	name.focus();
	kkjs.event.add(name, "blur", function(){
		if (!name.value){
			kkjs.css.className.add(name, "error");
		}
	});
	kkjs.event.add(name, "focus", function(){
		kkjs.css.className.remove(name, "error");
	});
}());
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben