jquery - ¿Cómo cambiar el formato del número de teléfono en la entrada a medida que escribe?

input formatting

Question

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

Tengo un campo de entrada para un número de teléfono que permite hasta 20 caracteres (para números internacionales).

También estoy usando el complemento jQuery de la entrada Masked de Josh Bush para dar formato al número de teléfono en la entrada para que sea "bonito".

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

• Mi problema es que en los requisitos cuando el teléfono tiene 10 dígitos o menos, debe usar el formato de entrada enmascarado.

• Sin embargo, cuando el número de teléfono tiene más de 10 dígitos, se debe eliminar el formato.

Aquí está mi actual: http://codepen.io/leongaban/pen/cyaAL , teléfono celular es el campo de entrada donde estoy tratando de lograr esto. Work Phone es un ejemplo de la funcionalidad predeterminada del complemento de entrada Mask .

¿Cómo abordarías este problema?

jQuery para el campo de entrada del teléfono celular:

case ''2'':
    console.log(''created phone input'');
    $(''.new_option'').append(myphone);
    $(''.added_mobilephone'').mask(''[phone]? 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(''[phone]? 9999999999'');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log(''greater then 10'');
        $(''.added_mobilephone'').mask(''99999999999999999999'');
      }*/
    });
    break;

Answer 1

En tu caso

<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="[phone]">

con jasny bootstrap plugin

Answer 2

Esto fue muy útil, solo agregué algunos códigos para que funcionen cuando el usuario borra algunos caracteres, le di la opción de ingresar solo números y una longitud máxima. Esto funciona para mí :)

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

Answer 3

Ingrese el texto de tipo para ingresar el número de teléfono de tipo. longitud máxima, marcador de posición utilizando 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">

Answer 4

Intenté algunas de las respuestas que no están en el complemento, pero desafortunadamente tenían efectos secundarios indeseables al editar el número de teléfono. Aquí hay una solución que terminé de crear que es simple y no tiene ninguna dependencia externa externa especial de terceros:

• No requiere ningún complemento -> solo JS y JQuery
• Filtra los no dígitos (es decir, el ruido) automáticamente
• Desplaza hacia la izquierda los dígitos del número de teléfono al borrar los dígitos
• Mantiene el formato / no se descompone al borrarlo
• No hace nada si nada cambia, por ejemplo, permite que el cursor se mueva hacia la izquierda / derecha para realizar cambios en comparación con otras soluciones que mantuvieron el cursor pegado para finalizar

CAVEAT: El número de teléfono considerado es solo para América del Norte, lo cual estuvo bien en mi caso ya que se usó para el registro de fútbol de la comunidad local en Canadá.

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

Answer 5

Probablemente ya haya resuelto este problema, pero vale la pena tener en cuenta para futuras referencias que cualquier otra persona que necesite aplicar varias máscaras a un control tal vez desee explorar este complemento de máscara de entrada .

Tiene más devoluciones de llamada, configuraciones y muchos tipos de máscara listos para usar (asegúrese de revisar los archivos de extensión). También puede definir varias máscaras para un control, y el complemento intentará aplicar la máscara adecuada en función del valor.

Aquí hay un violín para demostrar la declaración anterior:

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

Answer 6

Solución similar a la anterior pero en este script el formato se aplica mientras el usuario escribe. Agregar máscara en el número de teléfono - Formato de teléfono brasileño (00)? 0000-0000. Puede ser útil para otros también.

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

Answer 7

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

Esto funcionará seguro :)