Betätigen der Leertaste unterbinden

[rainy_rayn]

Tach Leute!

Hab ein ganz simples Problem und hoffe auf eure Hilfe.

Ich habe ein Formular. Und ich will verhindern, dass in einem Formularfeld die Leertaste betätigt werden kann.

Eine ähnliche Funktion habe ich für Zahlen schon. Dass nur Zahlen in diesem Feld eingegeben werden kann.

siehe hier --> ~~~javascript <!--only numbers are allowed to fill in the fields -->
function justNumber(element){
var val = element.value.replace(/[^\d]/g, "");
element.value = val;
}

  
ich habe bereits versucht replace(/\s+/g, ""); aber es funktioniert nicht so richtig.  
  
Wie unterbinde ich also die Betätigung der Leertaste?  
  
Grüße

[MudGuard]

Hi,

Ich habe ein Formular. Und ich will verhindern, dass in einem Formularfeld die Leertaste betätigt werden kann.

sobald das Formularfeld den Fokus bekommt, schickst Du einen Ajax-Request los. Anhand der Remote-IP dieses Requests ermittelst Du, wo sich der Browser befindet (IP-Location ...). Dann rennst Du dorthin und reißt der Tastatur des betroffenen Computers die Leertaste raus.

M.a.W.: Du kannst nicht verhindern, daß die Leertaste betätigt wird.

Du kannst ggf. Leerzeichen aus der Eingabe entfernen.

ich habe bereits versucht replace(/\s+/g, ""); aber es funktioniert nicht so richtig.

Das sollte aber funktionieren.

cu,
Andreas

[braini]

Hi

ich habe bereits versucht replace(/\s+/g, ""); aber es funktioniert nicht so richtig.

Versuch es mal mit \S (gross S) das bedeutet Whitespaces (also Leerzeichen, Zeilenumbrüche, Tabulatoren)

Also in etwa so:

function noSpace(element){  
    var val = element.value.replace(/[^\S]/g, "");  
    element.value = val;  
}

[bubble]

Versuch es mal mit \S (gross S) das bedeutet Whitespaces (also Leerzeichen, Zeilenumbrüche, Tabulatoren)

Das ist falsch. \S ist die Gruppierung aller Nicht-Whitespaces.

function noSpace(element){

var val = element.value.replace(/[^\S]/g, "");
    element.value = val;
}

Funktionieren wird es zwar, aber umständlich. Du gibst da im Sinna a la "Ersetze alle Zeichen die nicht Nicht-Whitespaces sind durch nichts".  
  
~~~javascript
function noSpace(element) {  
	element.value = element.value.replace(/\s/g, "");  
}

Funktioniert einwandfrei und ist meiner Meinung nach auch viel besser lesbar.

MfG
bubble

[molily]

Hallo!

ich habe bereits versucht replace(/\s+/g, ""); aber es funktioniert nicht so richtig.

Das sollte klappen. Was heißt, es funktioniert nicht richtig?

Wie unterbinde ich also die Betätigung der Leertaste?

Ich hoffe, du lässt den Nutzer die Leertaste betätigen und diese Funktion wird nicht bei jedem Tastendruck ausgeführt.

Leerzeichen sind nämlich unglaublich sinnvoll, um lange Ziffernketten übersichtlicher zu gestalten (Artikelnummern, Kreditkarten- und Kontonummern usw.). AuchbeiWörternsollenLeerzeichenganzsinnvollsein,habeichgehört.

Wenn du in der Datenverarbeitung keine Leerzeichen haben willst, dann bereinige die Eingabe dort, wo die Verarbeitung passiert (vermutlich auf dem Server). Dort musst du die Eingabe ohnehin auf syntaktische und semantische Korrektheit prüfen und ggf. eine Normalisierung vornehmen.

Viele Grüße,
Mathias

[rainy_rayn]

Hallo, und danke für die schnellen Antworten.

Nun ja, wie meine ich das mit "das funktioniert nicht richtig" ?!

Wie bei meinem Beispiel mit justNumbers() wird die Eingabe von Buchstaben verhindert.
Schreibe ich "a" in das inputfeld, dann wird es sofort wieder gelöscht.

Und eben genau das, soll auch beim Leerzeichen funktionieren. Tut es aber nicht.
Verknüpft ist das ganze im input-Feld mit

Die Funktion:

function noSpace(element){  
	var val = element.value.replace(/[^\S]/g, "");  
	element.value = val;  
}  

im HTML-Script:
<input type="text" name="Name" size="10" maxlength="10" onkeyup="noSpace(this);"

Denk ich mir das ganze zu leicht, oder warum kann ich immer noch Leerzeichen schreiben?

[braini]

Der Code Funktioniert auf jeden Fall grundsätzlich...

Hier der jsFiddle

[rainy_rayn]

Der Code Funktioniert auf jeden Fall grundsätzlich...

Hier der jsFiddle

Dankeschön!! Genau DAS wollte ich erreichen :)
Danke für die vielen Tipps!!!

Und ja, HTML5 wäre manches mal wirklich einfacher, aber da ich anscheinend die einzige Person bin, die damit arbeitet in unsrem Unternehmen... *seufz*

[Matthias Apsel]

Om nah hoo pez nyeetz, rainy_rayn!

Falls HTML5 von Interesse ist, lässt sich auf JavaScript verzichten. Beispielseite

<input type="text" pattern="^\S*$">  

Matthias

[bubble]

Om nah hoo pez nyeetz, rainy_rayn!

Falls HTML5 von Interesse ist, lässt sich auf JavaScript verzichten. Beispielseite

Bei dem Geburtsdatum auf deiner Testseite gibts noch einen Fehler (mMn.)
Und zwar wird "0807-90" als valide erkannt. Macht zwar vom programmtechnischen Ablauf wohl kein Problem, aber die 0 von 07 wird als Trennzeichen betrachtet.

Ich würde \D als Trennzeichen-Maske nehmen und beim zweiten Trennzeichen dann die Backreference.
Denn ein 08.07-90 sieht auch irgendwie Kacke aus :D

MfG
bubble

[Matthias Apsel]

Om nah hoo pez nyeetz, bubble!

Bei dem Geburtsdatum auf deiner Testseite gibts noch einen Fehler (mMn.)
Und zwar wird "0807-90" als valide erkannt. Macht zwar vom programmtechnischen Ablauf wohl kein Problem, aber die 0 von 07 wird als Trennzeichen betrachtet.

Ich würde \D als Trennzeichen-Maske nehmen und beim zweiten Trennzeichen dann die Backreference.

Das soll an verschiedene Stellen ins Wiki (ohne die verbotenen Leerzeichen). Ich bin noch nicht sicher, was alles rein soll (mit und ohne submit, mit und ohne Autorenstyles, :invalid gilt auch für form, aber nicht für fieldset, wie verhalten sich die relevanten Browser?)

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, bubble!

Ich würde \D als Trennzeichen-Maske nehmen und beim zweiten Trennzeichen dann die Backreference.

Es fehlen einfach zwei Backslashes, denn bei uns werden ja Punkte geschrieben. Punkt. ;-)

Matthias

[bubble]

Ich würde \D als Trennzeichen-Maske nehmen und beim zweiten Trennzeichen dann die Backreference.
Es fehlen einfach zwei Backslashes, denn bei uns werden ja Punkte geschrieben. Punkt. ;-)

Oder so.

Bei deinem anderen Post geh ich mal davon aus, dass du mich missverstanden hattest.

Trotzdem hab ich mal für momentan installierte Browser geguckt:
Firefox Nightly 26.0a1 (2013-08-28): läuft alles korrekt
Google Chrome 29: läuft alles korrekt
Opera 12.15: läuft alles korrekt
Internet Explorer 10: läuft alles korrekt
Safari 5.1.7: wenn man invalide Daten eingegeben hat, kann man trotzdem das Formular absenden, die Anzeige, ob es valide ist oder nicht, funktioniert.

MfG
bubble

[Matthias Apsel]

Om nah hoo pez nyeetz, bubble!

Bei deinem anderen Post geh ich mal davon aus, dass du mich missverstanden hattest.

warum?

Was denkst du habe ich gedacht und was hätte ich stattdessen denken sollen?

Ich bin im Moment am überlegen, wie man diese invalid-required-pattern-Geschichte ins Wiki steckt, zum Beispiel in die praktisch unbearbeitete Übername aus der Doku und hatte dieses Beispiel schon zurhand. Allerdings bin ich noch nicht so ganz glücklich damit.

Trotzdem hab ich mal für momentan installierte Browser geguckt:

Danke für die Unterstützung.

Matthias

[bubble]

Bei deinem anderen Post geh ich mal davon aus, dass du mich missverstanden hattest.
Was denkst du habe ich gedacht und was hätte ich stattdessen denken sollen?

Deinen "anderen" Post hatte ich zu erst gelesen und wusste nicht recht auf was sich das aus meinem Post bezieht.
Dann hab ich mir deinen zweiten Post angeguckt. Nach einem Blick auf die Zeiten dachte ich, du dachtest erst (Vorsicht, fiese Unterstellung), dass ich einen Browser benutze bei dem der Feature-Support noch nicht vollständig ist.

Ich bin im Moment am überlegen, wie man diese invalid-required-pattern-Geschichte ins Wiki steckt, zum Beispiel in die praktisch unbearbeitete Übername aus der Doku und hatte dieses Beispiel schon zurhand. Allerdings bin ich noch nicht so ganz glücklich damit.

8. @required
9. @pattern
10. siehe auch

Die Pseudo-Klasse :invalid würde ich nur als Randinfo erwähnen und/oder mit einem Link zu Seite der Pseudo-Klasse.

MfG
bubble