使用 JavaScript 以 XXXX XXXX XXX 格式格式化 12 位数字

Question

我有一个输入字段，用户在其中键入一个 12 位数字，我需要以 XXXX XXXX XXXX (每 4 位数字后 sapce(的格式显示它。我如何在 javascript 中实现它，以便它与退格、中间编辑等很好地配合使用。

这是我写的，但是当我从两者之间的某个地方编辑输入时，它行为不正常。

function format_outlet_id(value) {
var content = value.value.trim();
var length = content.length;
var key = event.keyCode || event.charCode;
if (!(key == 8 || key == 32 || key == 46)) {
if (length == 12) {
data = content.match(/.{1,4}/g);
value.value = data[0] + " " + data[1] + " " + data[2];
}
}}

Answer 1

您可以使用selectionEnd来控制光标的位置

var target = document.querySelector('.creditCardText');
target.addEventListener("keyup", function() {
var position = target.selectionStart;
var prevVal = target.value;
var newVal = prevVal.split(" ").join(""); // remove spaces
if (newVal.length > 0) {
newVal = newVal.match(new RegExp('.{1,4}', 'g')).join(" ");
}
target.value = newVal;

for (var i = 0; i < position; i++) {
if (prevVal[i] != newVal[i]) {
target.selectionEnd = position + 1;
return;
}
}
target.selectionEnd = position;
});

<input type="text" class="creditCardText" />

Answer 2

你可以尝试使用正则表达式。 我希望这些代码对您有所帮助

<div class="col-sm-3 form-group">
<b>Aadhar No :*</b><br>
<p><input title="Aadhar No" class="form-control" oninput="this.className = ''" name="aadharNo" id="aadharNo" valideAtt="aadhar" onblur="return defaultValidation(this)"></p>
<span id="er_aadhar" style="display: block; width:100%; float: left;"></span>
</div>


<script type="text/javascript">
var REG_AADHAR = /^d{4}sd{4}sd{4}$/;
function defaultValidation(src){
var getAttributeValue=src.attributes.valideAtt.value;
if(getAttributeValue=="aadhar"){
if(!src.value.match(REG_AADHAR)){
$("#"+src.id).addClass("invalid");
$("#er_"+src.id).html("<span style="color:red">Please Enter Valide Adhaar Number.<span>");
return false;
}else{
$("#er_"+src.id).html("");  
return true;
}
}
}
</script>