Mặt nạ zip jQuery cho nhiều định dạng

Question

Tôi có một yêu cầu để che dấu một trường zip sao cho nó cho phép mã zip cổ điển gồm 5 chữ số (XXXXX) hoặc định dạng 5 + 4 (XXXXX-XXXX).

tôi có thể để một cái gì đó như:

$('#myZipField').mask("?99999-9999"); 

nhưng biến chứng xuất phát từ thực tế là dấu gạch ngang không nên được hiển thị nếu người dùng đặt trong chỉ có 5 chữ số.

Đây là điều tốt nhất tôi đã làm - tôi có thể mở rộng nó để tự động chèn dấu gạch ngang khi chúng chèn chữ số thứ 6 nhưng vấn đề với hành vi này sẽ bị xóa khi tôi xóa dash nhưng nó sẽ vá các bản vá và vân vân, nó trở thành một cơn ác mộng):

$.mask.definitions['~']='[-]'; 
$("#myZipField").mask("?99999~9999", {placeholder:""}); 

có bất kỳ ra khỏi con đường hộp để làm điều này hay sao tôi phải cuộn của riêng tôi?

Answer 1

Bạn không phải sử dụng một trình cắm khác. Chỉ cần di chuyển dấu hỏi, do đó thay vì:

$('#myZipField').mask("?99999-9999"); 

bạn nên sử dụng:

$('#myZipField').mask("99999?-9999"); 

Sau khi tất cả, nó không phải là toàn bộ chuỗi đó là không bắt buộc, chỉ là - trở đi.

Answer 2

Tại sao không có trường trong suốt và có đối tượng văn bản đằng sau nó với biểu mẫu có màu xám nhạt? Vì vậy, họ thấy ####### - #### ở chế độ nền, và sau đó sửa nó để các chữ cái biến mất khi chúng gõ. Tại thời điểm đó, nó cho thấy rằng họ nên nhập một dấu gạch ngang nếu họ muốn đặt thêm bốn, phải không? Sau đó, bạn có thể chỉ cần dàn dựng kịch bản để tự động chèn dấu gạch nối nếu chúng lộn xộn và nhập 6 số?

Answer 3

Nếu bạn đang sử dụng jQuery đã có, có lẽ hàng trăm plugin cho mặt nạ vv, ví dụ: http://www.meiocodigo.com/projects/meiomask/

Vì vậy, tôi không nghĩ rằng bạn sẽ phải cuộn của riêng bạn

Answer 4

mã zip này thực sự là đơn giản, nhưng khi bạn có một định dạng phức tạp hơn để xử lý, đây là cách nó được giải quyết với các plugin (từ demo page):

var options = {onKeyPress: function(cep, e, field, options){ 
    var masks = ['00000-000', '0-00-00-00']; 
    mask = (cep.length>7) ? masks[1] : masks[0]; 
    $('.crazy_cep').mask(mask, options); 
}}; 

$('.crazy_cep').mask('00000-000', options);