Форматирование форматирования динамического ввода

Question

Я пытаюсь отформатировать поле <input> с помощью javascript/jquery.

Цель - Как пользователь вводит, автоматически добавляет дефисы после каждого третьего символа.

123123123 becomes 123-123-123 

У меня есть рабочий код, но он очень медленный и неуклюжий. Я ищу рекомендации о том, как улучшить код

$('#serial').keyup(function(){ 
 

 
    $(this).val($(this).val().trim()); 
 

 
    var str = $(this).val(); 
 
    var newStr = str.replace(/-/g, ""); 
 

 
    var valuesArray = newStr.split(""); 
 
    var newVal = ""; 
 

 
    while (i = valuesArray.shift()){ 
 
    if(newVal.length === 3){ 
 
     newVal += "-"; 
 
    } else if (newVal.length === 7){ 
 
     newVal += "-"; 
 
    } 
 
    newVal += i; 
 
    } 
 
    $(this).val(newVal); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<label for="serial">Type something magical</label> 
 
<input type="text" id="serial" name="serial">

Answer 1

Используйте input событие istead из keyup это очень полезно для отслеживания поля ввода изменений:

$('#serial').on('input', function(){ 

ПРИМЕЧАНИЕ : Код кажется медленным, потому что keyup не срабатывает, пока вы не отделитесь Освободите ключ, но вы можете ввести следующий символ перед тем, как выпустить первый.

Надеюсь, это поможет.

---

Update:

Вам не нужно никаких циклов здесь, вы можете использовать substr, чтобы сократить строку и вставить в сепаратор - и использовать maxlength, чтобы определить максимальное количество Charaters, который вы хотите содержат свой серийный номер:

$('#serial').on('input', function() 
 
{ 
 
    var input_value = $(this).val().trim().replace(/-/g, ""); 
 
    
 
    if(input_value.length > 3){ 
 
     input_value = input_value.substr(0, 3) + '-' + input_value.substr(3); 
 
    } 
 
    if (input_value.length > 7){ 
 
     input_value = input_value.substr(0, 7) + '-' + input_value.substr(7); 
 
    } 
 
    
 
    $(this).val(input_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="serial" name="serial" maxlength="11">

Answer 2

попробовать это code, заменить inefficient regex с подстроки

$('#serial').input(function(){ 

    $(this).val($(this).val().trim()); 

    var str = $(this).val().trim().split("-").join(""); 
    var output = ""; 
    while (str.length > 3) 
    { 
    output += str.substring(0,3) + "-"; 
    str = str.substring(3); 
    } 
    output += str; 

    $(this).val(output); 

}); 

Answer 3

Чуть дальше оптимизации

$('#serial').on('input', function() { 

    var str = $(this).val().trim(); 
    var i = 3; 
    while (i < str.length) { 
    if (str.charAt(i) == '-') { 
     i += 4; 
    } else { 
     str = str.slice(0, i) + '-' + str.charAt(str.length-1); 
    } 

    } 
    $(this).val(str); 

}); 

jsfiddle https://jsfiddle.net/h5hdvcwu/1/