Javascript und Inputfeld

[SimoNxD]

Hallo Leute.

Ich habe ein Inputfeld wo man immer mal größere Zahlen eintragen muss.

Als Beispiel: 10000000000 also 10.000.000.000

Nun möchte ich das ich im Inputfeld sobald ich die zahlen eingebe, er mir nach jedem 3. Zeichen einen Punkt setzt (So wie bei Windows7 beim Taschenrechner, wenn man Zifferngrupierung anhat.
Aber Javascript sollte das nicht erst bei einem Knopfdruck machen, sondern schon direkt bei der Eingabe.

Hoffe ihr versteht was ich meine.
Wie kann ich dies erreichen?
Gibt es dafür nen Tutorial oder kann mir hier jemand mal solch eine Function posten?

MfG

 

[Gilles]

Hab dir mal ne Variante geshrieben

var valueLength = 0;
      function checkNumber(event) {
          var value = this.value;
          if(valueLength == value.length) return true;
          valueLength = value.length;
          value = value.replace(/\./g,"");

          var reverseArray = value.split("").reverse();

          var newString = "";

          for(var i=0; i < reverseArray.length; i++) {
              if(i != 0 && i % 3 == 0) {
                  if(reverseArray[i] != ".")
                  newString += ".";
              }
              newString += reverseArray[i];
          }

          this.value = newString.split("").reverse().join("");
      }
      window.onload = function() {
        document.getElementById("zahlenInput").onkeyup = checkNumber;
      };

 

[Tronjer]

Alternativ dazu das Ganze in 5 Zeilen jQuery.

$('input').on('keypress', function() {
  var digits = $(this).val().split('.').join('');
  digits = digits.length;
  digits % 3 == 0  && digits != 0 ? $(this).val($(this).val() + ".") : $(this).val($(this).val());
});

Mit einer Zeile mehr kann man dann auch noch verhindern, dass der User etwas anderes als Zahlen eingibt.

$('input').on('keypress', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which), digits = $(this).val().split('.').join('');
  digits = digits.length;
  if ( code < 48 || code > 57 ) return false;
  digits % 3 == 0  && digits != 0 ? $(this).val($(this).val() + ".") : $(this).val($(this).val());
});

 

[SimoNxD]

Danke an euch beiden, doch noch eine Frage:

<script type="text/javascript">
$('#menge').on('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which), digits = $(this).val().split('.').join('');
digits = digits.length;
if ( code < 48 || code > 57 ) return false;
digits % 3 == 0 && digits != 0 ? $(this).val($(this).val() + ".") : $(this).val($(this).val());
});
</script>

Das ist ja jetzt der script und oben "#menge" gebe ich ja die id mit an, bei welchen diese aktion geschehen soll oder?

<input type="text" id="menge" name="menge_gold">

Habs jetzt so gemacht, allerdings splittet er mir bei eingabe nicht nach jeder 3. Zahl...

Was hab ich falsch gemacht ?
MfG

 

[Tronjer]

Also hier geht es.
http://jsfiddle.net/8ngAb/

 

[SimoNxD]

Hab es genau so gemacht wie es da jz ist.. Allerdings kommt nichts.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$('#menge').on('keypress', function (e) {
     var code = (e.keyCode ? e.keyCode : e.which),
       digits = $(this).val().split('.').join('');
     digits = digits.length;
     if (code < 48 || code > 57) return false;
     digits % 3 == 0 && digits != 0 ? $(this).val($(this).val() + ".") : $(this).val($(this).val());
   });
</script>

<input type="text" id="menge" name="menge_gold">

Wenn ich jetzt was ins Textfeld eingebe kann ich immer noch Buchstaben eingeben und die Zahlen splitten sich nicht

 

[Tronjer]

Kein Wunder. Du bindest den Eventhandler an ein Input-Feld, das noch nicht existiert.

Mit etwas Überlegung kommst du selber auf die Lösung. ;)

 

[SimoNxD]

ARGH! D
Wusste, nicht das erst das Inputfeld, dann der js, weil ich eig immer javascript im Headbereich habe D:

Okay, danke danke ! D Letzte Frage: Ich kann jetzt auch keine Zahlen mehr löschen. Sprich wenn ich mich vertippe muss ich die Seite neu laden Kann also diese Taste über ENTER nicht drücken, wie mache ich das wieder aktiv :x?

 

[Tronjer]

Entweder nimmst du mein erstes Script oder erweiterst die Abfrage der Key Codes.