使用jQuery和Masked Input Plugin的電話蒙板

Question

我有一個問題，用jQuery和Masked Input Plugin矇蔽手機輸入。

有2種可能的格式：

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

有什麼辦法來掩蓋它接受這兩種情況？

編輯：

我想：

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

但它不工作，我想。

最接近的一個是（xx）x​​xxx-xxxxx。

當我鍵入第10個數字時，我想獲得（xx）x​​xxx-xxxx，並且當鍵入第11個數字時獲得（xx）x​​xxxx-xxxx。它是否可行？

Answer 1

試試這個 - 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 2

其實正確答案是http://jsfiddle.net/HDakN/

佐爾坦答案將允許用戶輸入 「（99）9999」，然後離開現場不完全

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

使用jQuery Mask插件有兩種可能的實現方法：

個

1-繼機構Anatel的recomendations： https://gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9

2或不按國家電信管理局的recomendations： https://gist.github.com/igorescobar/5327820

所有以上示例使用jQuery屏蔽插件，它可以從以下網址下載進行編碼： http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 4

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

Answer 5

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

只有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 6

這裏是一個jQuery的電話號碼面具。不需要插件。 格式可以根據您的需要進行調整。

Updated JSFiddle。

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 7

要做到這一點，最好的辦法是使用變化事件是這樣的：

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

你需要一個jQuery插件面具也起作用。

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

做它模糊的最好方法是：

     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 10

可以使用使用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/Inputmask@3.3.7/dist/inputmask/inputmask.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.extensions.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.numeric.extensions.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.date.extensions.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.phone.extensions.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/jquery.inputmask.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/phone-codes/phone.js"></script>

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

Answer 11

As alternative

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