帶有 jQ​​uery 和屏蔽輸入插件的電話屏蔽

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)xxxx-xxxxx。

我想在輸入第 10 個數字時得到 (xx)xxxx-xxxx，當我輸入第 11 個數字時得到 (xx)xxxxx-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

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

更新了 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 3

你也需要一個 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 4

實際上正確的答案是在http://jsfiddle.net/HDakN/

Zoltan 回答將允許用戶輸入“(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 5

您可以在 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 6

使用 jQuery Mask Plugin 有兩種可能的方法來實現它：

1- 按照 Anatel 的建議： https : //gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9

2- 或者不遵循 Anatel 的建議： https : //gist.github.com/igorescobar/5327820

上面的所有示例都是使用 jQuery Mask Plugin 編碼的，可以在以下位置下載： http : //igorescobar.github.io/jQuery-Mask-Plugin/

Answer 7

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 8

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

最好的方法是使用這樣的更改事件：

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

在模糊上做到這一點的最佳方法是：

                        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 11

作為替代

    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 12

我在輸入字段上開發了簡單易用的掩碼到美國電話格式jquery-input-mask-phone-number

簡單 將jquery-input-mask-phone-number插件添加到您的 HTML 文件中並調用 usPhoneFormat 方法。

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

工作 JSFiddle 鏈接https://jsfiddle.net/1kbat1nb/

NPM 參考網址https://www.npmjs.com/package/jquery-input-mask-phone-number

GitHub 參考網址https://github.com/rajaramtt/jquery-input-mask-phone-number

Answer 13

如果您不想將掩碼顯示為占位符，則應使用jQuery Mask Plugin 。

最干凈的方法：

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 14

是的使用這個

$("#phone").inputmask({"mask": "(99) 9999 - 9999"});

鏈接在這里

Answer 15

$('.phone').focus(function(e) {
    // add mask
    $('.phone')
        .mask("(99) 99999999?9")
        .focusin(function(event)
        {
            $(this).unmask();
            $(this).mask("(99) 99999999?9");
        })
        .focusout(function(event)
        {
            var phone, element;
            element = $(this);
            phone = element.val().replace(/\D/g, '');
            element.unmask();

            if (phone.length > 10) {
                element.mask("(99) 99999-999?9");
            } else {
                element.mask("(99) 9999-9999?9");
            }
        }
    );
});