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

Espressolia · 13.05.2012

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:

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

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

hi.

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

HTML:

<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

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

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:

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

Kannst du mir helfen?

mindraper · 14.05.2012

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

hi.

sorry, mein fehler. kann ja so nicht klappen :hmpf:

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

HTML:

<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

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

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:

<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

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

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:

<!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

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

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

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

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

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

hi.

@Doitsu:

Doitsu schrieb:
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

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

mindraper schrieb:
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

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

hi.

Doitsu schrieb:
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ß