ввода маски в JQuery - без использования библиотеки

Question

Так что я пытаюсь взять США номер социального страхования в качестве входных данных и пытается замаскировать его, автоматически вставляя тире, не позволяя более чем 9 цифр и т.д.

Пожалуйста, смотрите Fiddle.

Мои проблемы с кода:

Я отключил клавиши со стрелками, то есть, потому что если кто-то возвращается с помощью клавиш со стрелками и прижимает забой (сделать правку к определенному номеру), мой код брейки, и он вставляет дополнительные тире, что неприемлемо.

Мой код выглядит следующим образом:

$('#ssn').on("keyup change paste mouseup", function(evt) { 
    setTimeout(function() { 

     var $ssn = $('#ssn'); 
     var $length = $ssn.val().length; 
     var $value = $ssn.val(); 

     $ssn.val(formatSSN($value)); 
    }, 10); 

}); 

// Start of section that prevents arrow keys  
$('#ssn').on("click focus", function(evt) { 
    var value = $(this).val(); 
    $(this).val('').val(value); 
}); 

$('#ssn').on("keydown", function(evt) { 

    var key = evt.keyCode; 
    if (key >= 37 && key <= 40) { 

     $(this).focus(); 
     var value = $(this).val(); 
     $(this).val(' ').val(value); 
     evt.stopPropagation(); 
     return false; 
    } 
}); 

// End of section that prevents arrow keys 

function formatSSN(inputSSN) { 
    var dashPositions = [3, 6]; 
    var inputLength = inputSSN.length; 
    var output = inputSSN; 
    for (i in dashPositions) { 


     if (dashPositions[i] < inputLength) { 
      if (output[dashPositions[i]] !== '-') { 
       var firstPart = output.substring(0, dashPositions[i]) + '-'; 
       var secondPart = output.substring(dashPositions[i]); 
       output = firstPart + secondPart; 
      } 
     } 

    } 
    if (output.length > 11) { 
     output = output.substring(0, 11); 
    } 
    return output; 
} 

Мой вопрос:

Есть ли способ, что я могу включить клавиши со стрелками, и по-прежнему сохраняют позиции черточек? (предотвратить лишние/неуместные тире)?

Спасибо.

Answer 1

Вы можете использовать input событие, .prop(), replace() с RegExp/./g, магазин вход в переменной перед первоначальное значение заменяется; удалить символы из значений, которые не являются цифрами, с использованием .test() с RegExp/\D/; использовать атрибут maxlength для установки максимальной длины input значение;

var res = ""; 
 

 
$(".social").on("input", function(e) { 
 
    // current value 
 
    var val = e.target.value.slice(-1); 
 
    // if `val` contains only digit characters 
 
    if (!/\D/.test(val)) { 
 
    res += val; 
 
    console.log(res); 
 
    } 
 
    // remove characters that are not digits from displayed `-` 
 
    if (/\D/.test(val)) { 
 
    e.target.value = e.target.value.slice(0, -1) 
 
    } 
 

 
    $(this).prop("value", function(i, prop) { 
 
    // set number of characters to mask with `"-"` 
 
    if (prop.length < 7) { 
 
     return prop.replace(/./g, "-") 
 
    } 
 
    }) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input class="social" maxlength="9" />

Answer 2

Вы можете использовать скрытое поле для хранения фактического значения. Затем, когда пользователь вводит значение в видимое поле, вы можете использовать JQuery для захвата нажатий клавиш и отображения «*» или какого-либо другого символа, а затем добавить захваченного символа в скрытое поле. Есть библиотеки, которые могут сделать это проще, но это прекрасно работает ... не изящно, а работает.