all javascript jquery input mask maskedinput

javascript - all - jquery replace text



Máscara de teléfono con jQuery y complemento de entrada enmascarado (13)

Tengo un problema para enmascarar la entrada de un teléfono con jQuery y el complemento de entrada enmascarada .

Hay 2 formatos posibles:

  1. (XX)XXXX-XXXX
  2. (XX)XXXXX-XXXX

¿Hay alguna forma de enmascararlo aceptando ambos casos?

EDITAR:

Lo intenté:

$("#phone").mask("(99) 9999-9999"); $("#telf1").mask("(99) 9999*-9999"); $("#telf1").mask("(99) 9999?-9999");

Pero no funciona como me gustaría.

El más cercano era (xx) xxxx-xxxxx.

Me gustaría obtener (xx) xxxx-xxxx cuando escribo el décimo número, y (xx) xxxxx-xxxx cuando escribo el 11mo. ¿Es posible?



Aquí hay una máscara de número de teléfono jQuery. No se requiere un complemento. El formato se puede ajustar a sus necesidades.

JSFiddle actualizado .

HTML

<form id="example-form" name="my-form"> <input id="phone-number" name="phone-number" type="text" placeholder="(XXX) XXX-XXXX"> </form>

JavaScript

$(''#phone-number'', ''#example-form'') .keydown(function (e) { var key = e.which || e.charCode || e.keyCode || 0; $phone = $(this); // Don''t let them remove the starting ''('' if ($phone.val().length === 1 && (key === 8 || key === 46)) { $phone.val(''(''); return false; } // Reset if they highlight and type over first char. else if ($phone.val().charAt(0) !== ''('') { $phone.val(''(''+$phone.val()); } // Auto-format- do not expose the mask as the user begins to type if (key !== 8 && key !== 9) { if ($phone.val().length === 4) { $phone.val($phone.val() + '')''); } if ($phone.val().length === 5) { $phone.val($phone.val() + '' ''); } if ($phone.val().length === 9) { $phone.val($phone.val() + ''-''); } } // Allow numeric (and tab, backspace, delete) keys only return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }) .bind(''focus click'', function () { $phone = $(this); if ($phone.val().length === 0) { $phone.val(''(''); } else { var val = $phone.val(); $phone.val('''').val(val); // Ensure cursor remains at the end } }) .blur(function () { $phone = $(this); if ($phone.val() === ''('') { $phone.val(''''); } });


En realidad, la respuesta correcta está en http://jsfiddle.net/HDakN/

La respuesta de Zoltan permitirá la entrada del usuario "(99) 9999" y luego dejará el campo incompleto

$("#phone").mask("(99) 9999-9999?9"); $("#phone").on("blur", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 5 ) { var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 ); var lastfour = last.substr(1,4); var first = $(this).val().substr( 0, 9 ); $(this).val( first + move + ''-'' + lastfour ); } });​


La mejor forma de hacerlo es usar el evento de cambio de esta manera:

$("#phone") .mask("(99) 9999?9-9999") .on("change", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 3 ) { var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 ); var lastfour = move + last; var first = $(this).val().substr( 0, 9 ); // Change 9 to 8 if you prefer mask without space: (99)9999?9-9999 $(this).val( first + ''-'' + lastfour ); } }) .change(); // Trigger the event change to adjust the mask when the value comes setted. Useful on edit forms.


La mejor manera de hacerlo en blur es:

function formatPhone(obj) { if (obj.value != "") { var numbers = obj.value.replace(//D/g, ''''), char = {0:''('',3:'') '',6:'' - ''}; obj.value = ''''; upto = numbers.length; if(numbers.length < 10) { upto = numbers.length; } else { upto = 10; } for (var i = 0; i < upto; i++) { obj.value += (char[i]||'''') + numbers[i]; } } }


Prueba esto - http://jsfiddle.net/dKRGE/3/

$("#phone").mask("(99) 9999?9-9999"); $("#phone").on("blur", function() { var last = $(this).val().substr( $(this).val().indexOf("-") + 1 ); if( last.length == 3 ) { var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 ); var lastfour = move + last; var first = $(this).val().substr( 0, 9 ); $(this).val( first + ''-'' + lastfour ); } });


Puede usar el alias del teléfono con Inputmask v3

$(''#phone'').inputmask({ alias: "phone", "clearIncomplete": true });

$(function() { $(''input[type="tel"]'').inputmask({ alias: "phone", "clearIncomplete": true }); });

<label for="phone">Phone</label> <input name="phone" type="tel"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/inputmask.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/inputmask.extensions.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/inputmask.numeric.extensions.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/inputmask.date.extensions.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/inputmask.phone.extensions.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/jquery.inputmask.js"></script> <script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/inputmask/phone-codes/phone.js"></script>

https://github.com/RobinHerbots/Inputmask#aliases


Se desarrollaron máscaras sencillas y sencillas en el campo de entrada al formato de teléfono de EE. UU. jquery-input-mask-phone-number

Simple Agregue el complemento jquery-input-mask-phone-number a su archivo HTML y llame al método usPhoneFormat.

$(document).ready(function () { $(''#yourphone'').usPhoneFormat({ format: ''(xxx) xxx-xxxx'', }); });

Trabajo JSFiddle Link https://jsfiddle.net/1kbat1nb/

URL de referencia de NPM jquery-input-mask-phone-number

URL de referencia de GitHub https://github.com/rajaramtt/jquery-input-mask-phone-number


Si no desea mostrar su máscara como marcador de posición, debe usar el http://igorescobar.github.io/jQuery-Mask-Plugin/ .

La manera más limpia:

var options = { onKeyPress: function(phone, e, field, options) { var masks = [''(00) 0000-00000'', ''(00) 00000-0000'']; var mask = (phone.length>14) ? masks[1] : masks[0]; $(''.phone-input'').mask(mask, options); } }; $(''.phone-input'').mask(''(00) 0000-00000'', options);


Como alternativa

function FormatPhone(tt,e){ //console.log(e.which); var t = $(tt); var v1 = t.val(); var k = e.which; if(k!=8 && v1.length===18){ e.preventDefault(); } var q = String.fromCharCode((96 <= k && k <= 105)? k-48 : k); if (((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=8 && e.keyCode!=39) { e.preventDefault(); } else{ setTimeout(function(){ var v = t.val(); var l = v.length; //console.log(l); if(k!=8){ if(l<4){ t.val(''+7 ''); } else if(l===4){ if(isNaN(q)){ t.val(''+7 (''); } else{ t.val(''+7 (''+q); } } else if(l===7){ t.val(v+'')''); } else if(l===9){ t.val(v1+'' ''+q); } else if(l===13||l===16){ t.val(v1+''-''+q); } else if(l>18){ v=v.substr(0,18); t.val(v); } } else{ if(l<4){ t.val(''+7 ''); } } },100); } }


Con jquery.mask.js

http://jsfiddle.net/brynner/f9kd0aes/

HTML

<input type="text" class="phone" maxlength="15" value="85999998888"> <input type="text" class="phone" maxlength="15" value="8533334444">

JS

// Function function phoneMask(e){ var s=e.val(); var s=s.replace(/[_/W]+/g,''''); var n=s.length; if(n<11){var m=''(00) 0000-00000'';}else{var m=''(00) 00000-00000'';} $(e).mask(m); } // Type $(''body'').on(''keyup'',''.phone'',function(){ phoneMask($(this)); }); // On load $(''.phone'').keyup();

Solo jQuery

http://jsfiddle.net/brynner/6vbrqe6z/

HTML

<p class="phone">85999998888</p> <p class="phone">8599998888</p>

jQuery

$(''.phone'').text(function(i, text) { var n = (text.length)-6; if(n==4){var p=n;}else{var p=5;} var regex = new RegExp(''(//d{2})(//d{''+p+''})(//d{4})''); var text = text.replace(regex, "($1) $2-$3"); return text; });


También necesita un complemento jQuery para la máscara.

- HTML -

<input type="text" id="phone" placeholder="(99) 9999-9999"> <input type="text" id="telf1" placeholder="(99) 9999*-9999"> <input type="text" id="telf2" placeholder="(99) 9999?-9999">

- JAVASCRIPT -

<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script> <script> $(document).ready(function($){ $("#phone").mask("(99) 9999-9999"); $("#telf1").mask("(99) 9999*-9999"); $("#telf2").mask("(99) 9999?-9999"); }); </script>


var $phone = $("#input_id"); var maskOptions = {onKeyPress: function(phone) { var masks = [''(00) 0000-0000'', ''(00) 00000-0000'']; mask = phone.match(/^/([0-9]{2}/) 9/g) ? masks[1] : masks[0]; $phone.mask(mask, this); }}; $phone.mask(''(00) 0000-0000'', maskOptions);