2016-11-09 56 views
1

我想在不改變實際值的情況下掩蓋輸入框中的文本。我無法使用任何插件。Javascript Input Text Masking without Plugin

我目前正在這樣做 - 但正如您所看到的問題是,實際值在提交時發生變化。我怎樣才能改變顯示值?

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

的''元件不具有顯示值。輸入的值是用戶看到的。您想要創建2個輸入:一個用於實際值,另一個用於顯示並可能接受來自用戶的輸入。 – styfle

+0

您想如何格式化內容? – DominicValenciana

+0

該掩碼的格式與00-000-00以上的功能相同。向8個號碼添加破折號 – user1392897

回答

3

你需要兩個輸入

兩個輸入應該把工作做好。一個輸入將包含掩碼文本,另一個輸入將包含真實數據的隱藏輸入。

<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