| 

.NET C# Java Javascript Exception

2
Hallo in die Runde,

ich möchte gerne per JavaScript Nichtzifferneingaben abfangen, sprich, es dürfen nur die Ziffern 0-9 oben auf der Tastatur und am Nummernpad eingegeben werden.

Zur Zeit habe ich nur das hier, was per onKeyDown Event ausgelöst wird:

function numbersOnly(evt) {
//get ADF Faces event source
var inputField = evt.getCurrentTarget();
var oldValue = inputField.getValue();
var ignoredControlKeys = new Array(AdfKeyStroke.BACKSPACE_KEY, AdfKeyStroke.TAB_KEY, AdfKeyStroke.ARROWLEFT_KEY, AdfKeyStroke.ARROWRIGHT_KEY, AdfKeyStroke.ESC_KEY, AdfKeyStroke.ENTER_KEY, AdfKeyStroke.DELETE_KEY);
//define the key range to exclude from field input
var minNumberKeyCode = 48;
var maxNumberKeyCode = 57;
var minNumberPadKeyCode = 96;
var maxNumberPadKeyCode = 105;
//key pressed by the user
var keyCodePressed = evt.getKeyCode();
//if it is a control key, don't suppress it
var ignoreKey = false;

for (keyPos in ignoredControlKeys) {
if (keyCodePressed == ignoredControlKeys[keyPos]) {
ignoreKey = true;
break;
}
}
//return if key should be ignored
if (ignoreKey == true) {
return true;
}
//filter keyboard input
if (keyCodePressed < minNumberKeyCode || keyCodePressed > maxNumberPadKeyCode) {
//set value back to previous value
inputField.setValue(oldValue);
//no need for the event to propagate to the server, so cancel it
evt.cancel();
return true;
}
if (keyCodePressed > maxNumberKeyCode && keyCodePressed < minNumberPadKeyCode) {
//set value back to previous value
inputField.setValue(oldValue);
evt.cancel();
return true;
}
}


Dieser Code funktioniert zwar, jedoch können die übrigen Zeichen, die ebenfalls oben auf den Zifferntasten sind, auch eingegeben werden. Das heißt, wenn ich SHIFT + 2 drücke, erscheint ein ". Das soll so nicht sein. Hat jemand irgendeine Idee, wie man das umsetzen kann? Das Blöde ist eben, dass immer nur die zuletzt gedrückte Taste ausgewertet wird. Und nicht beide auf einmal.

Ich danke Euch im Voraus!
10.10.2014
ozan 11 3
5 Antworten
2
Versuchs doch mal damit (auch im keydown):

var patt = /^[0123456789]+$/; // <-- RegExp

if (patt.test(e.key)) { // <-- Schaut, ob die gedrückte Taste zur RegExp passt.
// Mach ihrgendwas
} else {
return false; // <-- Bricht den Schreibvorgang ab.
}
10.10.2014
DerPunk 1,2k 1 7
var patt = /^[0-9]+$/;
B.F. 23.12.2014
1
Du musst bei der Eventzuweisung aufpassen, wenn du mit addEventListener arbeitetst, wird deine Funktion zusätzlich zum normalen Ablauf ausgeführt.
Du musst das Event überschreiben:

function cancelKeyDown(e){
var patt = /^[0123456789]+$/;
if (!patt.test(e.key)) {
return false;
}
}

var ele = document.getElementById("MeinTextFeld");
ele.onkeydown = cancelKeyDown; // <-- ### Überschreiben ###

So sollte es dann auch hoffendlich klappen. (Funktioniert auch im keypress Event)
14.10.2014
DerPunk 1,2k 1 7
1
Hallo zusammen,
du könntest aber auch die Funktionalität von HTML5 ausnutzen. Vermutlich ist das Eingabefeld ein Input Element. Bei HTML5 hast du die Möglichkeit dieses als "number" zu deklarieren. Damit werden per Default nur Ziffern in diesem Feld erlaubt.

Siehe hier

Du kannst aber auch den kompletten Wert aus dem Input Feld prüfen und alles was nicht Ziffer ist entfernen

function numbersOnlyShift(value) {
inputField.setValue(value.replace(/\D+/g, ""));
}


Bei diesem Beispiel musst du natürlich den kompletten Wert aus dem Input Feld übergen und nicht das Event bzw. das letzte Zeichen.

Gruß Jens

UPDATE: hier die HTML5 Erklärung vom W3C
29.12.2014
XJenso 322 7
Solange man nur moderne Browser unterstützen muss sicher die eleganteste Lösung. Leider muss man aber meistens noch veraltete IEs bedienen die das nicht unterstützen.
phg 04.01.2015
0
Hallo DerPunk,

Danke für Deine Antwort. Habe es so umgesetzt:

function numbersOnlyShift(evt) {
var patt = /^[0123456789]+$/; // oder eben: /^\d+$/;
if (!patt.test(evt.key)) { // wenn die Eingabe nicht passt,
return false; // dann abbrechen.
}
}


Aber er will nicht funktionieren. Nichtzifferneingaben sind weiterhin möglich.
Mache ich noch irgendetwas falsch? Habe es nur mit KeyDown probiert, da KeyPress/KeyUp hierbei ja keine Rolle spielen sollte.
13.10.2014
ozan 11 3
Wie weist du denn den EventHandler zu? Welchen Browser in welcher Version verwendest du zum testen?
phg 13.10.2014
0
Die Methode wird so aufgerufen:

<af:clientListener method="cancelKeyDown"
type="keyDown"/>


Ich arbeite mit Oracle ADF und habe mehrere Masken, die diesen Javascriptcode verwenden sollen. Deswegen könnte ich das mit der .getElementById so nicht lösen.
Funktioniert leider auch nicht :(
14.10.2014
ozan 11 3
1
Du verwendest anscheinend Oracle ADF (wenn ich das richtig ergoogelt habe), da kann ich jetzt nur raten. Eventuell reicht das return false nicht und du musst stattdessen evt.cancle(); aufrufen.
Oh und in deiner vorherigen Antwort nennst du die Methode "numbersOnlyShift(evt)", jetzt weist du aber "cancelKeyDown" zu. Steht das so in deinem Code oder kommt das nur vom kopieren?
Kannst du bitte für Kommentare die Kommentarfunktion verwenden, statt jedesmal eine neue Antwort zu erstellen? Das macht die Sache übersichtlicher, vor allem wenn sich jemand anderes hier einlesen möchte.
phg 14.10.2014
1
Ok das googeln hätte ich mir sparen können, ich hab deinen ADF-Hinweis total übersehen... Sorry! Aber probier es trotzdem mal mit evt.cancle(); statt return false ich könnt ja trotzdem richtig geraten haben ;)
phg 14.10.2014
Hi phg,
sorry, hatte die "Kommentieren"-Funktion nicht entdeckt.

Ja, die verschiedenen Methodennamen kommen vom Kopieren, damit da nichts verwechselt wird.

Ich werde es jetzt mit evt.cancel() versuchen und mich wieder melden.
ozan 15.10.2014
1
Hallo nochmal,

habe es jetzt so gemacht:
[code]function numbersOnlyShift(evt) {
var patt = /^\d+$/; // oder eben: /^\d+$/;
if (!patt.test(evt.key)) { // wenn die Eingabe nicht passt,
evt.cancel();
return false; // dann abbrechen.
}
}[/code]

Jetzt werden einfach ALLE Eingaben geblockt :)))
ozan 15.10.2014
Das passiert z.B. wenn evt.key == undefined ist, also das evt-Object keinen member namens key hat. Gut möglich, dass ADF das Event-Objekt selber implementiert, bzw. kapselt.
Dazu müsste man jetzt wissen, wie das übergebene evt-Objekt aufgebaut ist. Hab dazu nichts gefunden, kannst du vielleicht mal einen Browser verwenden der console.debug unterstützt (z.B. Firefox mit der Firebug-Erweiterung) und dann vor "evt.cancel();" einfach "console.debug(evt);" einfügen und schauen was dabei in der Konsole steht?
Btw. die Kommentieren-Funktion ist leider wirklich gut versteckt, also nix für ungut!
phg 16.10.2014

Stelle deine Javascript-Frage jetzt!