javascript - all - jquery replace text

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

Question

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?

Answer 1

Al usar el complemento jQuery Mask hay dos formas posibles de implementarlo:

1- Siguiendo las recomendaciones de Anatel: https://gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9

2- O sin seguir las recomendaciones de Anatel: https://gist.github.com/igorescobar/5327820

Todos los ejemplos anteriores se codificaron usando jQuery Mask Plugin y se pueden descargar en: http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 2

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

Answer 3

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 );
}
});​

Answer 4

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.

Answer 5

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];
}
}
}

Answer 6

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 );
}
});

Answer 7

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

Answer 8

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

Answer 9

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);

Answer 10

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);
}
}

Answer 11

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;
});

Answer 12

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>

Answer 13

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