Автоформат SSN при вводе номера

Ответ 1

<input id="ssn"/>

<script type="text/javascript">
    $('#ssn').keyup(function() {
        var val = this.value.replace(/\D/g, '');
        val = val.replace(/^(\d{3})/, '$1-');
        val = val.replace(/-(\d{2})/, '-$1-');
        val = val.replace(/(\d)-(\d{4}).*/, '$1-$2');
        this.value = val;
    });
</script>

Ответ 2

script из @kottenator был почти там, но он разбивает значение каждые 3 цифры вместо 3, затем 2, как 000-00-0000, необходимых для номеров социального страхования.

Я немного редактировал и модифицировал его, чтобы он работал по назначению. Надеюсь, это поможет.

    <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>

Ответ 3

@Dennis был лучшим здесь, однако он использовал JQuery для селектора, и у OP не было тега JQuery на этом посту, просто JavaScript. Вот версия решения VanillaJS (или хотя бы один способ сделать это:)

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;
};

Ответ 4

Я изменил Dennis 'script, немного удалив элементы jquery. Не знаю, почему были добавлены первые два предложения if, поэтому я удалил их из этой функции. Эта функция является слушателем для Titanium SDK с использованием underscore.js. Но вы должны иметь возможность модифицировать его для работы с другими JS API.

$.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;

    }
});

Ответ 5

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

Ответ 6

Ответ @Rost - отличное начало, но у него было три недостатка. В этом ответе я исправил два из них. Пороки:

1. Когда вы пытаетесь удалить "-", он немедленно появляется снова. Это исправлено.
2. Когда пользователь печатает что-то не так, неправильный текст был там на секунду, прежде чем уйти. Это также исправлено.
3. При любом изменении текста курсор перемещается в конец текста. Это все еще проблема.

fooobar.com/info/78531/...  лучшее предложение, которое я нашел, чтобы попытаться решить эту последнюю проблему. Здесь это не работает, потому что мы меняем количество символов в значении. Я еще не разработал математику, чтобы она работала правильно. Если я это сделаю, я отредактирую этот ответ.

<input id="ssn"/>

<script type="text/javascript">
  $( "#ssn" ).on("input", function() {
    var val = this.value.replace(/\D/g, '');
    val = val.replace(/^(\d{3})(\d{1,2})/, '$1-$2');
    val = val.replace(/^(\d{3})-(\d{2})(.+)/, '$1-$2-$3');
    this.value = val.substring(0, 11);
  });
</script>

Я не думаю, что событие input поддерживается во всех версиях всех браузеров. Вместо этого вы можете использовать событие keyup, но я не могу найти информацию о том, сколько браузеров поддерживают это. Если вы это сделаете, проблема № 2 вернется, но это может быть хорошо. Некоторым пользователям может быть полезно увидеть, что они делают неправильно.