没有插件的Javascript输入文本掩码

我想在不改变实际值的情况下屏蔽输入框中的文本。 我不能使用任何插件。

我目前正在这样做 – 但您可以看到问题是提交时实际值已更改。 我怎样才能更改显示值？

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

Answer 1

你需要两个输入

两个输入应该完成工作。 一个输入将包含屏蔽文本，另一个输入将包含实际数据的隐藏输入。

我接近掩蔽的方法是构建一个function，用于屏蔽和取消屏蔽内容，以便一切都保持一致。

 $("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); } 

工作JSFiddle

Answer 2

或者也

同

 function handleMask(event, mask) { with (event) { stopPropagation() preventDefault() if (!charCode) return var c = String.fromCharCode(charCode) if (c.match(/\D/)) return with (target) { var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd) var pos = selectionStart + 1 } } var nan = count(val, /\D/, pos) // nan va calcolato prima di eliminare i separatori val = val.replace(/\D/g,'') var mask = mask.match(/^(\D*)(.+9)(\D*)$/) if (!mask) return // meglio exception? if (val.length > count(mask[2], /9/)) return for (var txt='', im=0, iv=0; im