2013-02-13 72 views
1

目前我正在使用jquery.maskedinput作爲精確的掩碼格式,但它不適用於電話號碼。巴西的JavaScript掩碼電話號碼

在巴西,我們曾經有格式爲(99)9999-9999的所有數字。但最近在一些城市,手機使用(99)99999-9999,而他們的普通電話和國內其他地區仍然使用(99)9999-9999。

jquery.maskedinput似乎不支持2個格式在相同的輸入,其中字符串中間的字符可能或可能不存在。正如我在文檔中可以看到的,我可以有(99)9999-9999和(99)9999-99999,但這會混淆用戶。

是否有任何其他掩碼插件/框架允許我同時驗證(99)9999-9999和(99)99999-9999?

編輯:我創建使用哈利和德米特里·解決方案的全面測試:http://jsfiddle.net/NSd6g/$('#full').inputmask('(99)9999[9]-9999');

我要等待多一點,看看我能找到一個更好的解決方案。完美的一個不需要紅色信息,第二組默認有4位數字。而且,如果第三組獲得第五位數字,那麼只有第二組將獲得第五個空間,將第三組的第一個數字移動到第二組的第五個數字。大聲笑有點難以理解,對不起!

回答

5

你可以做到這一點使用jquery.inputmask簡單:

jQuery(function($) { 
    $('#test').inputmask('(99)9999[9]-9999'); 
}); 

試試這個demo

要在輸入時跳過可選部分,需要在掩碼中的可選部分(本例中爲連字符)後鍵入空格或字符。

+0

你的面具不適合我。當我輸入第三組的第一個數字時,我不能得到第五個組的第五個組。如果第二組的第一個數字可以是「數字或空間」,它可以工作。 – Hikari 2013-02-20 03:23:26

+0

它工作大聲笑!如果要使用4個數字,我需要添加一個註釋來解釋類型空間:P – Hikari 2013-02-20 03:25:08

+0

對不起,忘了提及這個:) – lazyhammer 2013-02-20 08:51:01

1

使用jQuery掩碼,只能將尾部字符設置爲可選。輸入中間不是中間的。

我的建議是有3個輸入框,一個用於數字的每個部分,在中間輸入的末尾有可選字符。然後在提交時連接輸入。

像這樣:

(<input id="phone2" />)<input id="phone3" />-<input id="phone4" /> 

jQuery(function($){ 
    $("#phone2").mask("99"); 
    $("#phone3").mask("9999?9"); 
    $("#phone4").mask("9999"); 
}); 

見琴:http://jsfiddle.net/Rge83/1/

爲了讓用戶更加友好,腳本移動到下一個輸入一旦當前一個已經充滿,可以添加+一些CSS使輸入看起來更像一個。

+0

好主意,我做了一些測試它:http://jsfiddle.net/6NXWW/但是我真的想要一個面具把它們放在一起 – Hikari 2013-02-20 03:26:38

1

我也是巴西人。

在我的工作,我們實際上並不使用「 - 」字符,中間爲這些類型的口罩,所以沒有混亂......最終口罩是以下幾點:(99)99999999?9

這是一個有點難以讓最終用戶通過這種方式識別錯誤鍵入的電話號碼,但它很有效。

我知道的另一種方法是在JS中構建正則表達式,然後將其與另一個插件一起使用,例如jQuery Validate

+0

哈哈是的,這是可以做到的,但8或9位數字在一起很難閱讀,而且很容易錯誤輸入。你能提供一個可用於驗證的正則表達式嗎? – Hikari 2013-02-20 02:39:46

0
//Configuração para celular com nono digito 
$('#Seletor').focusout(function() { 
    var phone, element; 
    element = $(this); 
    element.unmask(); 
    phone = element.val().replace(/\D/g, ''); 
    if (phone.length > 10) { 
     element.mask("(99) 99999-999?9"); 
    } else { 
     element.mask("(99) 9999-9999?9"); 
    } 
}).trigger('focusout'); 
0

我的建議是: 「(99)[9] 9999-9999」

+2

你能解釋爲什麼你認爲這是一個好的解決方案嗎? – Laurel 2016-06-03 19:29:21

+0

至少對我來說是更自然的,如果你想輸入一個8位數字的數字,只需在第一個數字中輸入一個空格就可以了... 美學效果更好...(11)9 1234-5678或(11)1234-5678 至少對我而言... – 2016-06-04 02:16:46