web-dev-qa-db-fra.com

Comment changer le format du numéro de téléphone en entrée au fur et à mesure que vous tapez?

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

J'ai un champ de saisie pour un numéro de téléphone qui permet jusqu'à 20 caractères (pour les numéros internationaux).

J'utilise également le plugin jQuery en entrée masqué par Josh Bush pour formater le numéro de téléphone en entrée pour le rendre "joli".

 enter image description here

  • Mon problème est que dans les conditions requises lorsque le téléphone est composé de 10 chiffres ou moins, il devrait utiliser le formatage d'entrée masqué.

  • Toutefois, lorsque le numéro de téléphone est supérieur à 10 chiffres, le formatage Doit être supprimé.


Voici mon actuel: CodePen , Téléphone portable est le champ de saisie où j'essaie d'accomplir cela. Work Phone est un exemple des fonctionnalités par défaut du plug-in Mask input .

Comment vous attaquer à ce problème?

(champ jQuery pour téléphone portable:} _

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;
jqueryinputformattingphone-numbermaskedinput
18
Leon Gaban

Vous avez probablement déjà résolu ce problème, mais il est utile de noter que toute personne ayant besoin d'appliquer plusieurs masques à un contrôle peut explorer ce plugin inputmask .

Il a plus de callbacks, de paramètres et de nombreux types de masques prêts à l'emploi (assurez-vous de jeter un coup d'œil aux fichiers d'extension). Vous pouvez également définir plusieurs masques pour un contrôle, et le plug-in essaiera d'appliquer le masque approprié en fonction de la valeur.

Voici un violon pour démontrer l'énoncé précédent:

$(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"));
});

Cela fonctionnera à coup sûr :)

28
Roop Kumar

C’était très utile, j’ajoutais seulement du code pour que cela fonctionne lorsque l’utilisateur supprimait certains caractères, j’avais l’option de saisir uniquement des nombres et une longueur maximale. Cela fonctionne pour moi :)

$(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

Dans ton cas

<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">

avec jasny bootstrap plugin

3
Orlando

J'ai essayé certaines des réponses sans plug-in mais elles ont malheureusement eu des effets secondaires indésirables lors de l'édition du numéro de téléphone. Voici une solution simple et qui ne crée aucune dépendance externe externe particulière vis-à-vis des bibliothèques:

  • Ne nécessite aucun plugin -> uniquement JS et JQuery
  • Filtre les non-chiffres (c'est-à-dire le bruit) automatiquement
  • Décale les chiffres du numéro de téléphone lors de la suppression des chiffres
  • Maintient le format/ne tombe pas en panne lors de la suppression
  • Ne fait rien si rien ne change, par exemple. permet au curseur de se déplacer vers la gauche/droite pour effectuer des modifications par rapport aux autres solutions qui gardaient le curseur indexé jusqu'à la fin

CAVEAT: Le numéro de téléphone considéré n’est que l’Amérique du Nord, ce qui me convenait parfaitement dans la mesure où il a été utilisé pour l’enregistrement de soccer communautaire au Canada.

$("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

Solution similaire ci-dessus, mais dans ce script, le format est appliqué pendant que l'utilisateur tape . Ajout d'un masque dans le numéro de téléphone - Brazilian Phone Format (00)? 0000-0000 . Il peut également s'avérer utile.

    //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

Saisissez le texte pour saisir le numéro de téléphone du type. longueur maximale, espace réservé à l'aide de 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