Javascript Input Text Masking без плагина

Question

Я хочу замаскировать текст в поле ввода без изменения фактического значения. Я не могу использовать никаких плагинов.

В настоящее время я делаю это, но, как вы видите, проблема заключается в том, что фактическое значение изменяется на submit. Как я могу просто изменить отображаемое значение?

$("input[name='number']").focusout(function(){ 
    var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3"); 
    this.value = number; 
} 

Answer 1

Вам нужны два входа

Два входа должен получить работу. Один вход будет содержать маскированный текст, а другой будет скрытым входом, который содержит реальные данные.

<input type="text" name="masknumber"> 
<input type="text" name="number" style="display:none;"> 

Так я подошел к маскировке, чтобы построить функцию как для маскирования и разоблачая содержание, так что все остается однородным.

$("input[name='masknumber']").on("keyup change", function(){ 
     $("input[name='number']").val(destroyMask(this.value)); 
    this.value = createMask($("input[name='number']").val()); 
}) 

function createMask(string){ 
    return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3"); 
} 

function destroyMask(string){ 
    return string.replace(/\D/g,'').substring(0,8); 
} 

Working JSFiddle