• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

Status
Für weitere Antworten geschlossen.
S

Sybille.

Neues Mitglied
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
 
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.
 
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! ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben