Tự động định dạng SSN khi nhập số

Question

Tôi có một trường văn bản và người dùng nhập số SSN. Trong khi nhập chính nó nó nên định dạng. Giống như Trên sự thay đổi của textField ... nó phải định dạng 999-999-999 theo cách này trên màn hình chính nó.

Answer 1

<input id="ssn"/> 

<script type="text/javascript"> 
    $('#ssn').keyup(function() { 
     var val = this.value.replace(/\D/g, ''); 
     var newVal = ''; 
     while (val.length > 3) { 
      newVal += val.substr(0, 3) + '-'; 
      val = val.substr(3); 
     } 
     newVal += val; 
     this.value = newVal; 
    }); 
</script> 

Answer 2

Các kịch bản từ @kottenator đã gần như ở đó, nhưng nó phá vỡ giá trị mỗi 3 chữ số, thay vì 3, sau đó 2, giống như 000-00-0000 cần thiết cho số An Sinh Xã Hội.

Tôi đã chỉnh sửa một chút và sửa đổi nó để hoạt động như dự định. Hi vọng điêu nay co ich.

<script type="text/javascript"> 
     $('#ssn1').keyup(function() { 
      var val = this.value.replace(/\D/g, ''); 
      var newVal = ''; 
      if(val.length > 4) { 
      this.value = val; 
      } 
      if((val.length > 3) && (val.length < 6)) { 
      newVal += val.substr(0, 3) + '-'; 
      val = val.substr(3); 
      } 
      if (val.length > 5) { 
      newVal += val.substr(0, 3) + '-'; 
      newVal += val.substr(3, 2) + '-'; 
      val = val.substr(5); 
      } 
      newVal += val; 
      this.value = newVal.substring(0, 11); 
     }); 
    </script> 

Answer 3

Tôi đã sửa đổi tập lệnh Dennis một chút loại bỏ các yếu tố jquery. Không chắc chắn lý do tại sao hai mệnh đề đầu tiên được thêm vào, vì vậy tôi đã xóa chúng khỏi hàm này. Chức năng này là một người nghe cho Titanium SDK sử dụng underscore.js. Nhưng bạn sẽ có thể sửa đổi nó để làm việc với các API JS khác.

$.usernameField.addEventListener('blur', function(param) { 

    var inputString = param.value; 

    if (inputString.length === 9 && _.isNumber(parseInt(inputString, 10))) { 

     var val = inputString.replace(/\D/g, ''); 

     var outputString = ''; 

     outputString += val.substr(0, 3) + '-'; 
     outputString += val.substr(3, 2) + '-'; 
     val = val.substr(5); 
     outputString += val; 

     $.usernameField.value = outputString; 

    } 
}); 

Answer 4

$('#ssn').keyup(function() { 
    var val = this.value.replace(/\D/g, ''); 
    var newVal = ''; 
    var sizes = [3, 2, 4]; 

    for (var i in sizes) { 
     if (val.length > sizes[i]) { 
     newVal += val.substr(0, sizes[i]) + '-'; 
     val = val.substr(sizes[i]); 
     } 
     else 
     break;   
    } 

    newVal += val; 
    this.value = newVal; 
}); 

Answer 5

@ câu trả lời của Dennis là tốt nhất ở đây, tuy nhiên nó được sử dụng JQuery để làm bộ chọn và OP không có một thẻ JQuery về bài đăng này, chỉ cần JavaScript. Đây là phiên bản VanillaJS của giải pháp (hoặc ít nhất một cách để làm điều đó :)

document.getElementById("ssn").onkeyup = function() { 
    var val = this.value.replace(/\D/g, ''); 
    var newVal = ''; 

    if(val.length > 4) { 
    this.value = val; 
    } 

    if((val.length > 3) && (val.length < 6)) { 
    newVal += val.substr(0, 3) + '-'; 
    val = val.substr(3); 
    } 

    if (val.length > 5) { 
    newVal += val.substr(0, 3) + '-'; 
    newVal += val.substr(3, 2) + '-'; 
    val = val.substr(5); 
    } 

    newVal += val; 
    this.value = newVal; 
};