2016-11-09 64 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