プラグインを使用しないJavascript入力テキストマスキング

Question

実際の値を変更せずに入力ボックスにテキストをマスクしたいとします。私はプラグインを使用することはできません。

私は現在これを行っていますが、実際の値が送信時に変更されることがわかります。表示値を変更するにはどうすればよいですか？

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

Answer 1

次の2つの入力

2つの入力が仕事を得る必要がある必要があります。 1つの入力にはマスクされたテキストが含まれ、もう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