Javascript Onkeypress "tab" bzw "Rück"- Taste

Espressolia · 13.05.2012, 10:45

Hallo,
ich benötige wieder einmal Hile.

In meinen Formular führe ich in einen Input- Feld eine Funktion mittels "onkeypress='validate(event);" aus. Leider kann ich bei Firefoks mittels tab nicht in ein anderes Input- Feld springen und auch nicht das zuletzt geschriebene Zeichen mittels der "Rück"- Taste löschen

So wird die Funktion aufgerufen:

HTML-Code:

input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeypress='validate(event);'/>

Meine Funktion seht so aus:

Code:

function validate(evt, form) {
  var theEvent = evt || window.event;
 
  var key = theEvent.keyCode || theEvent.which;
  key2 = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key2) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

In IE9 funktioniert die "Tab" und "Rück"- Taste.
Kann mir jemand helfen?
Danke im vorraus
Espressolia

mindraper · 13.05.2012, 15:58

hi.

in deinem HTML ist der funktionsaufruf "falsch". dort sollte kein parameter übergeben werden. bitte ändern auf:

HTML-Code:

<input ... onkeypress="validate()" />

deine momentane "validate"-function erwartet 2 parameter,
- evt
- form

evt soll ein generisches event-Object sein, das bedeutet, es wird vom JavaScriptinterpreter selbstständig erzeugt. das brauchst du nirgends übergeben.
form ist innerhalb deiner function nirgends genutzt und außerdem wird es ja auch nirgends übergeben. das kannst du also löschen.

JS

Code:

function validate( event ){
   var evt = event || window.event;
   if( !/[0-9]|\./.test( String.fromCharCode( evt.keyCode || evt.which ))){
      evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
   }
}

das sollte klappen.

Espressolia · 13.05.2012, 20:42

Hallo vielen Dank für die Antwort.
Leider klappt es nicht so ganz

Wenn ich so wie du sagst die Funktion validate() ohne Parameter aufrufe, gehen alle Zeichen und es gibt keine beschränkung mehr nur Zahlen

Code:

function validate(evt) {
  var theEvent = evt || window.event;
 
  var key = theEvent.keyCode || theEvent.which;
  key2 = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key2) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

egal ob oben "evt" oder "event" als Parameter steht, überall das selbe Ergebnis.

HTML-Code:

<input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeypress='validate();'/>

Kannst du mir helfen?

mindraper · 14.05.2012, 19:04

hi.

sorry, mein fehler. kann ja so nicht klappen

hier ist ein kompletter schnipsel, der funktioniert. ich vermute einfach mal, du hättest gerne, dass in deinem textfeld nur ziffern zugelassen werden?

HTML-Code:

<title>Unbenanntes Dokument</title>
<script>
//<![CDATA[
var validate = function( event ){
    var evt = event || window.event,
        key = String.fromCharCode( evt.keyCode || evt.which );
        
    if( !/\d|\./.test( key )){
        this.value = this.value.replace( /[^\d*]/g, '' );
    }
};
//]]>
</script>
</head>
<body>
<form id="my_form" action="#" method="get" enctype="application/x-www-form-urlencoded">
    <input id="plzag" type="text" name="plz" maxlength="5" />
</form>
<script>
//<![CDATA[
document.getElementById( 'plzag' ).onkeyup = validate;
//]]>
</script>
</body>

falls dem nicht so ist, ist hier eine variante deiner function die funzt ( einfach im obigen beispiel austauschen ):

Code:

var validate = function( event ){
    var evt = event || window.event, 
        key = String.fromCharCode( evt.keyCode || evt.which );    
    
    if( !/[0-9]|\./.test( key )){
        ( typeof evt.preventDefault !== 'undefined' ? evt.preventDefault() : evt.returnValue = false );
    }
};

gruß & sorry nochmal wegen dem "falschen" tipp!

Espressolia · 14.05.2012, 19:25

Kein Problem kann jeden passieren

Also ich habe jetzt:

Code:

function validate(event) {
  var evt = event || window.event,
        key = String.fromCharCode( evt.keyCode || evt.which );
 
    if( !/\d|\./.test( key )){
        this.value = this.value.replace( /[^\d*]/g, '' );
    }
};

HTML-Code:

<input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeyup='validate();'/>

Bin ich so blöd dafür, das es nicht klappt?
Kannst du mir bitte nochmal helfen?

edit: firebug fehler "evt is undefined -
key = String.fromCharCode( evt.keyCode || evt.which );"

Doitsu · 15.05.2012, 18:56

Hey hey,

1. muss man im Funktionsaufruf das event schon uebergeben, sonst kommt es auch nicht an.
2. ist onkeyup eine schlechte Wahl, besser: onkeydown (also beim herunter druecken der Taste, nicht beim loslassen)

Hier mal was ungetestet, sollte aber gehen [im IE bin ich mr nicht sicher]

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<script type="text/javascript">
		function validate(event) {
			var evt = event || window.event;
			var code = evt.keyCode || evt.which;
			var key = String.fromCharCode(code);

			if (/\d/.test(key) || // zahl
					code == 8 || // tab
					code == 9 || // backspace
					code == 13 // return
			) {
				return true;
			}
			return false;
		}
		;
	</script>
</head>
<body>
<input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeydown='return validate(event); '/>
</body>
</html>

Espressolia · 15.05.2012, 20:56

Super es klappt in Firefox als auch im IE9 *freu* Vielen Dank

Wie kann ich auch Komma und Punkt erlauben in regex? Hab schon /\d + , + \./ probiert geht aber leider nicht

Hab onkeypress genommen geht das auch?

Doitsu · 15.05.2012, 21:13

Durch den keyCode [ alert(evt.keyCode || evt.which) ] und die Bedingung erweitern.
Ansonsten muss der regEx so lauten: /(\d|\.|,)/
(Wuerde eher auf den Code zugreifen)

Und ja, onkeypress kann man auch nutzen.

mindraper · 16.05.2012, 01:19

hi.

@Doitsu:

Zitat:

Zitat von Doitsu

1. muss man im Funktionsaufruf das event schon uebergeben, sonst kommt es auch nicht an.
2. ist onkeyup eine schlechte Wahl, besser: onkeydown (also beim herunter druecken der Taste, nicht beim loslassen)

zu 1:
das event-object muss nur dann übergeben werden, wenn man seinen code immer noch nicht sauber voneinander trennt. also eventlistener im HTML selbst verankert.
hätte die TE meinen letzten beitrag richtig durchgesehen, wäre ihr vermutlich aufgefallen, dass ich den eventlistener im javascript gesetzt habe, was:
a) sauberer ist
b) hässliche konstrukte wie "return validate(event)" unnötig macht

zu 2:
wieso sollte onkeyup eine schlechtere wahl sein als onkeydown? bei onkeydown wird, solange der user die taste gedrückt hält, das event immer wieder aufgerufen – genau wie bei onkeypress. bei onkeyup nur ein einziges mal. ansonsten sind beide vollkommen gleich wenn man davon absieht, dass onkeydown beim drücken und onkeyup beim loslassen einer taste aufgerufen wird. deinen einwand verstehe ich nicht.

gruß

Doitsu · 16.05.2012, 16:12

Zitat:

Zitat von mindraper

das event-object muss nur dann übergeben werden, wenn man seinen code immer noch nicht sauber voneinander trennt. also eventlistener im HTML selbst verankert.
hätte die TE meinen letzten beitrag richtig durchgesehen, wäre ihr vermutlich aufgefallen, dass ich den eventlistener im javascript gesetzt habe, was:
a) sauberer ist
b) hässliche konstrukte wie "return validate(event)" unnötig macht

Das mag richtig sein, dass man das event nicht setzen muss, wenn man es per JS reinschreibt.
Aber: Wenn du es per JS einschreibst musst du jedesmal, wenn eine Taste gedrueckt wird, auch den Value-Wert umschrieben, damit der Buchstabe raus kommt. Das gleiche bei onkeyup (deswegen down), da es dort schon zu spaet ist um ein return false; zu geben (der Buchstabe steht ja da schon drin ..)

Und ein return false; ist wohl schoener, als jedes mal ein regex auszufuehren, um alle Zahlen raus zu werfen.

mindraper · 17.05.2012, 16:28

hi.

Zitat:

Zitat von Doitsu

Und ein return false; ist wohl schoener, als jedes mal ein regex auszufuehren, um alle Zahlen raus zu werfen.

ansichtssache. aber die logik kann ich nachvollziehen

gruß

13.05.2012, 10:45	#1
Espressolia Newbie Registriert seit: 04.11.2009 Ort: Sachsen Beiträge: 65 Kamera: meine Augen :-) Verwendet: Photoimpakt, Swishmax und diverse andere	Javascript Onkeypress "tab" bzw "Rück"- Taste Hallo, ich benötige wieder einmal Hile. In meinen Formular führe ich in einen Input- Feld eine Funktion mittels "onkeypress='validate(event);" aus. Leider kann ich bei Firefoks mittels tab nicht in ein anderes Input- Feld springen und auch nicht das zuletzt geschriebene Zeichen mittels der "Rück"- Taste löschen So wird die Funktion aufgerufen: HTML-Code: input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeypress='validate(event);'/> Meine Funktion seht so aus: Code: function validate(evt, form) { var theEvent = evt \|\| window.event; var key = theEvent.keyCode \|\| theEvent.which; key2 = String.fromCharCode( key ); var regex = /[0-9]\|\./; if( !regex.test(key2) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } } In IE9 funktioniert die "Tab" und "Rück"- Taste. Kann mir jemand helfen? Danke im vorraus Espressolia

13.05.2012, 15:58	#2
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	hi. in deinem HTML ist der funktionsaufruf "falsch". dort sollte kein parameter übergeben werden. bitte ändern auf: HTML-Code: <input ... onkeypress="validate()" /> deine momentane "validate"-function erwartet 2 parameter, - evt - form evt soll ein generisches event-Object sein, das bedeutet, es wird vom JavaScriptinterpreter selbstständig erzeugt. das brauchst du nirgends übergeben. form ist innerhalb deiner function nirgends genutzt und außerdem wird es ja auch nirgends übergeben. das kannst du also löschen. JS Code: function validate( event ){ var evt = event \|\| window.event; if( !/[0-9]\|\./.test( String.fromCharCode( evt.keyCode \|\| evt.which ))){ evt.preventDefault ? evt.preventDefault() : evt.returnValue = false; } } das sollte klappen. __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug. Geändert von mindraper (13.05.2012 um 16:00 Uhr).

13.05.2012, 20:42	#3
Espressolia Newbie Themenstarter Registriert seit: 04.11.2009 Ort: Sachsen Beiträge: 65 Kamera: meine Augen :-) Verwendet: Photoimpakt, Swishmax und diverse andere	Hallo vielen Dank für die Antwort. Leider klappt es nicht so ganz Wenn ich so wie du sagst die Funktion validate() ohne Parameter aufrufe, gehen alle Zeichen und es gibt keine beschränkung mehr nur Zahlen Code: function validate(evt) { var theEvent = evt \|\| window.event; var key = theEvent.keyCode \|\| theEvent.which; key2 = String.fromCharCode( key ); var regex = /[0-9]\|\./; if( !regex.test(key2) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } } egal ob oben "evt" oder "event" als Parameter steht, überall das selbe Ergebnis. HTML-Code: <input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeypress='validate();'/> Kannst du mir helfen?

14.05.2012, 19:25	#5
Espressolia Newbie Themenstarter Registriert seit: 04.11.2009 Ort: Sachsen Beiträge: 65 Kamera: meine Augen :-) Verwendet: Photoimpakt, Swishmax und diverse andere	Kein Problem kann jeden passieren Also ich habe jetzt: Code: function validate(event) { var evt = event \|\| window.event, key = String.fromCharCode( evt.keyCode \|\| evt.which ); if( !/\d\|\./.test( key )){ this.value = this.value.replace( /[^\d]/g, '' ); } }; HTML-Code: <input class="textfield" type="text" name="plz" maxlength="5" id="plzag" onkeyup='validate();'/> Bin ich so blöd dafür, das es nicht klappt? Kannst du mir bitte nochmal helfen? edit: firebug fehler "evt is undefined - key = String.fromCharCode( evt.keyCode \|\| evt.which );" Geändert von Espressolia (15.05.2012 um 07:42 Uhr).*

15.05.2012, 21:13	#8
Doitsu Mod \| Web Registriert seit: 15.04.2009 Ort: Potsdam Beiträge: 482	Durch den keyCode [ alert(evt.keyCode \|\| evt.which) ] und die Bedingung erweitern. Ansonsten muss der regEx so lauten: /(\d\|\.\|,)/ (Wuerde eher auf den Code zugreifen) Und ja, onkeypress kann man auch nutzen. __________________ Die Geschichte lehrt den Menschen, dass die Geschichte den Menschen nichts lehrt .. - Mahatma Gandhi

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Javascript Onkeypress "tab" bzw "Rück"- Taste

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

15.05.2012, 20:56	#7
Espressolia Newbie Themenstarter Registriert seit: 04.11.2009 Ort: Sachsen Beiträge: 65 Kamera: meine Augen :-) Verwendet: Photoimpakt, Swishmax und diverse andere	Super es klappt in Firefox als auch im IE9 freu Vielen Dank Wie kann ich auch Komma und Punkt erlauben in regex? Hab schon /\d + , + \./ probiert geht aber leider nicht Hab onkeypress genommen geht das auch?

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Javascript Onkeypress "tab" bzw "Rück"- Taste

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige