it-swarm.com.de

Wie kann ich das Telefonnummernformat bei der Eingabe ändern?

Mein CodePen:http://codepen.io/leongaban/pen/cyaAL

Ich habe ein Eingabefeld für eine Telefonnummer, die bis zu 20 Zeichen (für internationale Nummern) erlaubt.

Ich verwende auch das Masked-Eingabe-jQuery-Plugin by Josh Bush , um die Telefonnummer in der Eingabe zu formatieren, um sie "hübsch" zu machen.

 enter image description here

  • Mein Problem ist, dass in den Anforderungen, wenn das Telefon 10 Ziffern oder weniger hat, die maskierte Eingabeformatierung verwendet werden sollte.

  • Wenn jedoch die Telefonnummer länger als 10 Ziffern ist, sollte die Formatierung .__ entfernt werden.



Hier ist mein aktuelles: CodePen , Handy ist das Eingabefeld, in dem ich versuche, dies zu erreichen. Work Phone ist ein Beispiel für die Standardfunktionalität des Mask-Eingabe-Plugins .

Wie würdest du dieses Problem angehen?

Eingabefeld für jQuery für Mobiltelefon:

case '2':
    console.log('created phone input');
    $('.new_option').append(myphone);
    $('.added_mobilephone').mask('(999) 999-9999? 9');
    $('.added_mobilephone').keypress(function(event){

      if (this.value.trim().length > 10) {
        console.log('this.value = '+this.value.trim());
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }

      /*if (this.value.length < 9) {
        console.log(this.value);
        console.log('less then 10');
        $('.added_mobilephone').mask('(999) 999-9999? 9999999999');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }*/
    });
    break;
18
Leon Gaban

Sie haben dieses Problem wahrscheinlich bereits gelöst, es ist jedoch zu beachten, dass alle anderen Personen, die mehrere Masken auf ein Steuerelement anwenden möchten, dieses inputmask plugin erkunden möchten.

Es gibt mehr Callbacks, Einstellungen und viele vordefinierte Maskentypen (schauen Sie sich die Erweiterungsdateien an). Sie können auch mehrere Masken für ein Steuerelement definieren. Das Plugin versucht, die entsprechende Maske basierend auf dem Wert anzuwenden.

Hier ist eine Geige um die vorherige Aussage zu demonstrieren:

$(window).load(function()
{
   var phones = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];
    $('#textbox').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input type='text' id='textbox' />

22
Kevin
$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

Das wird sicher funktionieren :)

28
Roop Kumar

Dies war sehr hilfreich, ich füge nur etwas Code hinzu, damit es funktioniert, wenn der Benutzer einige Zeichen löscht. Das funktioniert für mich :)

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="phone-format"  type="text" placeholder="Phone Number">

15
Atif Tariq

In Ihrem Fall

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<input type="text" class="form-control" data-mask="(999) 999-9999">

mit jasny bootstrap plugin

3
Orlando

Ich habe einige der Nicht-Plugin-Antworten ausprobiert, diese hatten jedoch leider unerwünschte Nebeneffekte bei der Bearbeitung der Telefonnummer. Hier ist eine Lösung, die ich am Ende erstellt habe, die einfach ist und keine besondere Abhängigkeit von externen Drittanbietern hat:

  • Benötigt keine Plugins -> nur JS und JQuery
  • Nicht-Ziffern (d. H. Rauschen) werden automatisch herausgefiltert
  • Verschiebt die Ziffern der Telefonnummer beim Löschen von Ziffern
  • Behält das Format bei und bricht beim Löschen nicht zusammen
  • Nichts, wenn sich nichts ändert, z. Der Cursor kann sich nach links/rechts bewegen, um Änderungen gegenüber anderen Lösungen vorzunehmen, bei denen der Cursor am Ende fixiert wurde

CAVEAT: Die in Betracht gezogene Telefonnummer ist nur Nordamerika, was in meinem Fall in Ordnung war, da dies für die Registrierung der lokalen Community Soccer in Kanada verwendet wurde.

$("input[name='phone_num']").keyup(function() {
  var val_old = $(this).val();
  var val = val_old.replace(/\D/g, '');
  var len = val.length;
  if (len >= 1)
    val = '(' + val.substring(0);
  if (len >= 3)
    val = val.substring(0, 4) + ') ' + val.substring(4);
  if (len >= 6)
    val = val.substring(0, 9) + '-' + val.substring(9);
  if (val != val_old)
    $(this).focus().val('').val(val);
});
1
nikolaosinlight

Eine ähnliche Lösung oben, aber in diesem Skript gilt das Format, während der Benutzer eingibt. Die Maske wird in die Telefonnummer eingefügt - Brazilian Phone Format (00) - 0000-0000 .

    //Add mask (00) ?0000-0000 in the phone number - Brazil Format
    $('#iTel').on("keyup blur", function(e){
    	var v = $(this).val();
    	v = v.replace(/[^\d]/g,'');
    	if(v.length < 6){
    		v = v.replace(/(\d{2})/, '($1) ');
    	}else if(v.length < 10){
    		v = v.replace(/(\d{2})(\d{4})/, '($1) $2-');
    	}else if(v.length < 11){
    		v = v.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');				
    	}else {
    		v = v.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
    	}
    $(this).val(v);		
       });
    <!DOCTYPE html>
     <html lang="en">
     <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <form method="post" id="cadForm" action="incluir.php">
    <div class="form-row">
     <div class="form-group col-md-12">
    	<label for="iTel" class="col-form-label">Phone</label>
    	<div class="input-group">
    	<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
    	<input type="text" class="form-control" name="iTel" id="iTel" maxlength="15" placeholder="(xx) ?xxxx-xxxx..." pattern="[(][0-9]{2}[)][\s][0-9]{4,5}[-][0-9]{4}$" title="Please, type only number: (00) ?0000-0000">
    	</div>			
    </div>
      </body>
     </html>

0
CarlosE

Eingabetyp Text zur Eingabetyp-Telefonnummer. Max-Länge, Platzhalter mit Jquery.

// Used to format phone number and add placeholder and max-length
function phoneFormatter() {
 $(' input[type="text"]').attr({ placeholder : '(___) ___-____' });
  $('input[tabindex="111"]').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
     
    }
    $(this).val(number)
    $('input[type="text"]').attr({ maxLength : 10 });
    
  });
};

$(phoneFormatter);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_111[]" value="" tabindex="111">

0
Musaib Memdu