Eingabe bedingt verarbeiten

[drsoong]

Hi ohne frohe Ostern,

in diesem jsFiddle habe ich das Problem vereinfacht dargestellt.

Das value-Feld und das percentage-Feld sind miteinander verbunden. Ändert sich das eine, wird das andere sofort entsprechend geändert.
Bitte nicht so auf die Berechnung achten, die habe ich unsinnig vereinfacht.

Ist die Eingabe in ein Feld allerdings nicht erlaubt (nur Zahlenfeldbearbeitung), soll die Eingabe verhindert werden.

Das kriege ich trotz vielfacher Versuche nicht hin. In der jsFiddle Version kann man trotzdem z. B. Buchstaben eingeben.

Ich habe schon versucht die "anderen" Events wie keydown, keypress, input, change am "feuern" zu hindern und vermute auch,
dass da irgendwo die Lösung steckt, allerdings führte das nie zum gewünschten Ergebnis.

Vlt. kann ja mal ein Javascript-Osterhase da reinschauen und mir einen Tipp geben.

[drsoong]

So, konnte es inzwischen doch lösen mit diesem Code.

Kommt mir allerdings etwas aufgebläht vor. Also, falls da jemand noch etwas Eleganteres kennt...

[protestix]

Seit Html5 kannst du dem Element Input diverse Attribute mitgeben, mit dem du die Eingabe steuern kannst. Du kannst beispielsweise, wenn du ein Textfeld hast mit pattern arbeiten. Du kannst mit min und max diverse Grenzen für ein number Feld festlegen usw. mehr dazu unter Input type="number" und Attribut pattern.

Das feuern kannst nicht verhindern, sondern lediglich abfangen.

Tipp: mit dem Attribut autofocus musst du nicht mehr in das Feld klicken. Es erhält den Focus schon beim ersten Aufruf der Seite und ist dann für die Eingabe bereit.

[Tronjer]

So, konnte es inzwischen doch lösen mit diesem Code.

Kommt mir allerdings etwas aufgebläht vor. Also, falls da jemand noch etwas Eleganteres kennt...

Quick & dirty mit Angular?
https://plnkr.co/edit/9oy5cfxrbicN54zIeo0H?p=preview

[drsoong]

protestix: Vielen Dank für Deine Tipps. Pattern verwende ich nur dann, wenn ich keine andere Lösung sehe. Grund: Ich komme mit regulären Ausdrücken nicht klar. Wenn ich nur daran denke: "Nur Zahlen, Komma, Punkt, Pfeil-vor, Pfeil-zurück, Tab, backspace, delete". Das kann mir sicherlich einer der Gurus hier zeigen. Beherrschen werde ich es dennoch nicht. Da habe ich seit 14 Jahren eine "Versteh-Sperre". Autofocus ist mir neu und daher ein guter Hinweis. Da das Ding aber auch auf mobilen Endgeräten laufen soll, muß ich vermeiden, dass durch Autofocus gleich mal die Tastatur hochschnellt und den Blick versperrt. Geht natürlich mit einer Endgerätweiche...

[drsoong]

@Tronjer: Hatte auch schon an Angular gedacht. Hatte mich vor gut einem Jahr mal für das Framework interessiert und leider feststellen müssen, dass ich es einfach nicht schnalle. Ist mir insgesamt viel zu kompliziert auch wenn der von Dir gezeigte Code kurz und übersichtlich ist. Danke trotzdem.

[kaminbausatz]

Quick & dirty mit Angular?

eher dirty:


Unbenannt-1.png

[Tronjer]

Jo, hatte onpaste nicht abgefangen.
https://plnkr.co/edit/9oy5cfxrbicN54zIeo0H?p=preview

[kaminbausatz]

Jo, hatte onpaste nicht abgefangen.
https://plnkr.co/edit/9oy5cfxrbicN54zIeo0H?p=preview

[kaminbausatz]

So, konnte es inzwischen doch lösen mit diesem Code.

Kommt mir allerdings etwas aufgebläht vor. Also, falls da jemand noch etwas Eleganteres kennt...

Es ist immer schlecht bei solchen Geschichten irgendeinen keycode auszuwerten. Du solltest nur oninput einsetzen. Onchange ist schlecht weil es erst nach lostfocus eintritt. Bei oninput erfasst Du gleichzeitig auch die paste und drop Geschichte.

Du musst demnach nur noch .value auswerten, ob hier ungültige Zeichen enthalten sind und diese töten...

[drsoong]

@kaminbausatz: Danke. Habe inzwischen gemerkt, dass Android Chrome kein keyup-Event kennt, was meinen Ansatz wie eine Seifenblase zerplatzen lässt.
Also habe ich mal flugs Deinen Hinweis aufgegriffen und sowas jetzt gemacht.

var s = $(this).val().toString();
var sNew = s.replace(/[^0-9,.-]/g, '');
$(this).val(sNew);

Das funktioniert auch anscheinend überall außer IE < 9, da kein Input-Event. Damit kann ich aber leben. Soll eh nur zur Verbesserung des Inputs dienen.

Drastisch kürzer ist der Code jetzt auch. Also nochmals danke.

[kaminbausatz]

pure js:

percentage.addEventListener('input', function(){
    this.value=this.value.replace(/[^0-9,.-]/g, '');
});

[drsoong]

pure js:

percentage.addEventListener('input', function(){
this.value=this.value.replace(/[^0-9,.-]/g, '');
});

Wer braucht schon jQuery ?

[kaminbausatz]

Wer braucht schon jQuery ?

Du sprichst mir aus der Seele