[ERLEDIGT] Telefon-Nr. - Automatische Formatierung während Eingabe

Sybille. · 13 Juni 2016

Hallo zusammen

Leider habe ich auch nach langem Googeln keinen Scrip für mein Problem gefunden, obwohl ich denke, dass sich bereits einige dieselbe Frage gestellt haben.

Gerne möchte ich, dass die Telefonnummer bei der Eingabe durch den User direkt automatisch formatiert wird. Sprich die Aufteilung +41 11 222 33 44 soll automatisch erfolgen und direkt ersichtlich sein, ohne dass der User selber Abstände eingibt. Nach der Eingabe von +41 soll automatisch ein Abstand (auch wenn nur visuell) erscheinen und nach zwei weiteren Ziffern wieder. Ob der Wert anschliessend mit Leerzeichen (+41 11 222 33 44) oder an einem Stück (+41112223344) gespeichert wird, spielt mir keine Rolle.

Besten Dank im Voraus für eure Hilfe.
Gruss Sybille

Tronjer · 13 Juni 2016

Das hier wäre ein Ansatz, der nach der zweiten, fünften und siebten Ziffer Leerzeichen einfügt und diese beim Versenden wieder herausfiltert:

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
  <form class="container" id="myForm">
    <div class="form-group">
      <input type="text" class="form-control" id="phone">
    </div>
    <button class="btn btn-default" type="submit">Submit</button>
  </form>
  <div id="foo"></div>
<script>
  (function() {
    var input = document.querySelector("#phone"),
        form = document.querySelector("#myForm");

    function convertInput() {
      var converted = [],
          val = input.value.split('');
          raw = '';

      val = val.filter(item => item.trim() !== '');

      for (var i = 0; i < val.length; i++) {
        if (i == 2 || i == 4 || i == 7 || i == 9) {
          converted.push(' ');
        }
        converted.push(val[i]);
      }

    
      raw = converted.join('');
      input.value = raw;
      return raw.replace(/\s+/g, '');;
    };

    input.addEventListener('keyup', convertInput);

    form.addEventListener('submit', function() {
      alert(convertInput());
    });
  })();

</script>
</body>
</html>

Für weitere Optionen wie prüfen auf Validität, löschen führender Nullen, hinzufügen von '+', etc., gibt es die Jobbörse.

Sybille. · 17 Juni 2016

Hallo Tronjer

Herzlichen Dank für deine Hilfe! :):):):):)

Ich habe den Script scheinbar nicht korrekt eingebettet, daher funktioniert es noch nicht korrekt. Ich muss mir einen Moment Zeit nehmen um den Script nochmals zu prüfen und dann klappt es bestimmt. Besten Dank für deinen Script. Ist wirklich genial.

Ich wünsche dir ein tolles Weekend! ;)

[ERLEDIGT] Telefon-Nr. - Automatische Formatierung während Eingabe

Sybille.

Neues Mitglied

Tronjer

Senior HTML'ler

Sybille.

Neues Mitglied

Neueste Beiträge