使用JS向HTML输入表单值添加输入空间，不起作用

Question

我试图在javascript的帮助下在HTML输入字段中添加数字的自动间距，但似乎对输入字段本身有一些限制。我写这篇文章是作为wordpress插件的一部分，所以这就是为什么我要逃离"：将其用于插件输出的返回变量。

所以，我有基本的输入字段HTML代码：

<input class="numbersfield" type="numbers" oninput="numberWithSpaces(this.value);">

这里有一个功能：

function numberWithSpaces(x) {
var parts = x.toString().split(".");
document.getElementById("numbersfield").value = parts[0].replace(/B(?=(d{3})+(?!d))/g, " ");

它在数字字段中不输出空格。然而，当将相同的数据推送到标签时，间距是存在的：(另请参阅链接中的截屏(

document.getElementById("lblError").innerHTML = parts[0].replace(/B(?=(d{3})+(?!d))/g, " ");
document.getElementById("numbersfield").value = parts.join(" ");
document.getElementById("numbersfield").value = document.getElementById("lblError").innerHTML

}

将其用作数字输入字段，在应用第一个空格后使字段为空。将其更改为输入类型文本可以解决此问题。最后，当我突然想到我有它时，它在第一个正确的间距之后给出了错误的间距，每个新值的间距，比如1 0 0 000 000。

有人掌握了这个功能吗？感谢您的帮助！

输入屏幕截图

Answer 1

您可以使用正则表达式来实现如下效果：

function format() {
var x = document.getElementById("numbers");
x.value = format1(x.value);
}
function format1(s) {
return s.toString().replace(/(?!^)(?=(?:d{3})+(?:.|$))/gm, '$& ');
}

<input type="text" id="numbers"><button onclick="format()">Format</button>

如果你想实时实现它：

var text = document.getElementById("text");
function format() {
var x = document.getElementById("numbers");
if(x.value.length>50){
text.textContent='why so long tho';
} else {
text.textContent = format1(x.value);
}

}
function format1(s) {
return s.toString().replace(/(?!^)(?=(?:d{3})+(?:.|$))/gm, '$& ');
}

Format your text!<br><br>
<input type="text" id="numbers" oninput="format()">
<p id="text"></p>

如果您想在用户仍在键入时更改它：

function format() {
var x = document.getElementById("numbers");
x.value=format1(x.value.toString().replace(/s/g, ''));

}
function format1(s) {
return s.toString().replace(/(?!^)(?=(?:d{3})+(?:.|$))/gm, '$& ');
}

<input type="text" id="numbers" oninput="format()">