如何在輸入時更改輸入中的電話號碼格式？

我CodePen：http://codepen.io/leongaban/pen/cyaAL 如何在輸入時更改輸入中的電話號碼格式？

我有一個輸入字段的電話號碼，允許多達20個字符（國際號碼）。

我還使用Masked input jQuery plugin作者：Josh Bush來格式化輸入中的電話號碼以使其「相當」。

我的問題是，在需求的時候，手機爲10位或更少，它應該使用屏蔽輸入格式。
但是，如果電話號碼長於10位數字，則應刪除格式。

這是我目前的：CodePen，手機就是我試圖做到這一點的輸入字段。工作電話是Mask input plugin的默認功能的一個示例。

你會如何解決這個問題？

的jQuery的手機輸入字段：

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

來源

2013-07-31 Leon Gaban

你檢查出這個問題了嗎？ http://stackoverflow.com/questions/2580550/how-to-get-the-jquery-maskedinput-unmask-function-to-work-properly 這個問題的方法檢查指示國際＃或沒有的框可能是好的還有一個用戶體驗的觀點（在你目前的版本中，當最初使用默認的美國電話格式時，國際用戶可能會感到困惑） –

哦，謝謝你的鏈接！現在檢查出來，會看看我能否更好地工作 –

您可能已經解決了這個問題，但它是值得一提供將來參考其他任何人與需要多個口罩適用於控制可能想要探索這inputmask plugin。

它有更多的回調，設置和許多開箱即用的遮罩類型（請務必查看擴展文件）。您還可以爲控件定義多個蒙版，並且該插件將嘗試根據該值應用適當的蒙版。

Here is a fiddle演示前面的語句：

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

來源

2013-11-22 21:12:24 Kevin

我必須添加通過jsfiddle共享的整個粘貼嗎？ –

@KhanShahrukh這是做到這一點的一種方式。我剛剛更新了包含用於輸入掩碼的CDN片段的答案。你應該擁有你需要的一切。 – Kevin

我知道這個答案的過時。 @Roop Kumar在下面給出了更好的答案。 –

這是非常有益的，我只是添加一些代碼，使其工作時，用戶可以刪除一些文字，我給進入的選項只有數字和最大長度。這對我的作品:)

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

來源

2015-10-29 13:51:23

這應該是最好的答案。 – Rivers

謝謝你。河流 –

當你試圖抹去你寫下的東西時，這並不奏效。 – Feek

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

這將肯定:)

來源

2016-05-06 07:09:56

我希望我可以upvote這100次。最佳解決方案 –

我嘗試了一些非插件的答案，但他們不幸得了不良的副作用時，工作編輯電話號碼。這裏是我結束了創建簡單且沒有特殊的外部第三方的lib依賴的解決方案：

不需要任何插件 - >只是JS和JQuery
過濾掉非數字字符（即噪聲）自動
左移的電話號碼位數上的數字刪除
維護格式/不分解上刪除
請問什麼，如果沒有什麼變化如允許光標左/右移動，以使變革與它保持光標其它解決方案盯住結束

警告：認爲電話號碼是唯一的北美，因爲這是用於當地社區足球這是在我的情況罰款在加拿大註冊。

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

來源

2017-02-16 00:32:02 nikolaosinlight

輸入類型文本到輸入類型的電話號碼。最大長度，使用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">

來源

2017-07-11 12:09:05

爲什麼2 [answer]（https://stackoverflow.com/a/45034485/4753489）s？ –

上面的jQuery容易在頁面中維護 –

-1

窗口底部到使用jquery頂部滾動粘菜單。

var lastScroll = 0; 

    $(document).ready(function($) { 

    $(window).scroll(function(){ 

    setTimeout(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll > lastScroll) { 

      $("header").removeClass("menu-sticky"); 

     } 
     if (scroll == 0) { 
     $("header").removeClass("menu-sticky"); 

     } 
     else if (scroll < lastScroll - 5) { 


      $("header").addClass("menu-sticky"); 

     } 
     lastScroll = scroll; 
     },0); 
     }); 
     }); 
</script>

來源

2017-07-11 12:21:02

在你的情況

<input type="text" class="form-control" data-mask="(999) 999-9999">

與jasny bootstrap插件

Demo in fiddle

來源

2018-01-23 06:34:01 Orlando