自動填充圓括號和連字符電話號碼輸入jquery

我想有一個用戶的輸入自動填充電話號碼的標點符號看起來像這樣（xxx）xxx-xxxx。我已經寫了一個例子jfiddle here，但填寫電話號碼的最後4位數時會中斷。自動填充圓括號和連字符電話號碼輸入jquery

$("#phone").on("change keyup paste", function() { 
    var output; 
    var input = $("#phone").val(); 
    input = input.replace(/[^0-9]/g, ''); 
    var area = input.substr(0, 3); 
    var pre = input.substr(3, 4); 
    var tel = input.substr(6, 4); 
    if (area.length < 3) { 
     output = "(" + area; 
    } else if (area.length == 3 && pre.length < 3) { 
     output = "(" + area + ")" + " " + pre; 
    } else if (area.length == 3 && pre.length == 3) { 
     output = "(" + area + ")" + " " + pre + "-" + tel; 
    } 
    $("#phone").val(output); 
}); 

HTMl: 
<input id='phone'></input>

來源

2014-11-25 Dylan

我能使用@Felix解決，但我注意到，當有人要改變自己的號碼，該代碼不允許別人。你如何使它成爲一個佔位符類型的輸入，他們可以刪除他們的號碼並重新輸入？ – 2016-03-10 20:20:03

如果您開始使用正則表達式，爲什麼不去完整的方式。在過濾輸入值並將其轉換爲您的外觀的代碼下面。

請注意，此代碼僅適用於僅包含數字的值。你可以通過插件或自己的代碼阻止任何其他類型。（jquery.numeric plugin是一個不錯的選擇）

jQuery的

$(document).on('change', '.js-phone-number', function() { 
    var 
    $this = $(this), 
    number = $this.val(); 

    number = number.replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3'); 
    $this.val(number); 
});

來源

2014-11-25 04:44:33 UtherTG

正則表達式是你的朋友。

var ok = phNum.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/); 
if (ok==0) { 
    var parts = phNum.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/); 
    output.value='('+parts[1]+') '+parts[2]+'-'+parts[3]; 
}

接受：404-555-1234，4045551234，（404）555-1234，等返回：（404）555-1234

來源

2014-11-25 04:45:36

當你從數量越來越預代碼，你想得到4，而不是4位數。所以，改變這種狀況，它看起來工作:)

var pre = input.substr(3, 3);

如果您不希望動態填充，其他貼出答案可能是有用的。

來源

2014-11-25 04:50:39 Felix

謝謝。當我今天回到這裏時，我看到了這一點，並且因爲犯了一個愚蠢的錯誤而頭疼自己。 – Dylan 2014-11-26 02:11:59

你正在獲取變量pre作爲長度爲4的子字符串，然後檢查它是否小於或等於3.因此，基本上你最後的其他if塊永遠不會是真的。

變化var pre = input.substr(3,3);

您的代碼將正常工作。

來源

2014-11-25 04:53:56 arachnid

我意識到這篇文章較舊，但我發現它非常有用，並對其進行了一些小修改以增強其在所有電話欄中的性能，並允許在用戶犯錯時刪除字符。

$("input[type='tel']").each(function(){ 
 
    $(this).on("change keyup paste", function (e) { 
 
    var output, 
 
     $this = $(this), 
 
     input = $this.val(); 
 

 
    if(e.keyCode != 8) { 
 
     input = input.replace(/[^0-9]/g, ''); 
 
     var area = input.substr(0, 3); 
 
     var pre = input.substr(3, 3); 
 
     var tel = input.substr(6, 4); 
 
     if (area.length < 3) { 
 
     output = "(" + area; 
 
     } else if (area.length == 3 && pre.length < 3) { 
 
     output = "(" + area + ")" + " " + pre; 
 
     } else if (area.length == 3 && pre.length == 3) { 
 
     output = "(" + area + ")" + " " + pre + "-" + tel; 
 
     } 
 
     $this.val(output); 
 
    } 
 
    }); 
 
});

<input type="tel" placeholder="(XXX) XXX-XXXX" />

來源

2017-05-03 03:42:28 Zanderi

爲了允許（xxx）xxx-xxxx，pattern屬性的值是什麼。之前我正在檢查短劃線，所以我的html是 – 2017-12-02 07:16:17

自動填充圓括號和連字符電話號碼輸入jquery

回答

相關問題