显示新的输入值（添加空格）
Posted
技术标签:
【中文标题】显示新的输入值（添加空格）【英文标题】：Displaying new input value (adding spaces) 【发布时间】：2016-10-28 15:20:27 【问题描述】：对于像我这样的新手来说，这似乎很尴尬，但是在 html 输入中的数字之间添加空格后，在 html 输入字段中显示新值让我非常头疼。 基本上，我想要实现的是在用户“取消点击”输入后在输入字段中的数字之间添加空格。
例如，123456789123456789 将更改为 12 3456 7891 2345 6789。我得到用户输入的值并在我想要的地方添加空格，但我无法让它出现在输入字段中。我的代码如下所示：
'use strict';
$(document).ready(function ()var $inputTwo = $('#separateNumbers');
$inputTwo.change(function()
var inputNumber = $inputTwo.val();
var separatedNumbers = [];
var part1 = inputNumber.substring(0, 2);
separatedNumbers.push(part1);
for (var i = 2; i < inputNumber.length; i += 4)
separatedNumbers.push(inputNumber.substring(i, i + 4))
var displayNumber = separatedNumbers.join(' ');
$inputTwo.val(displayNumber);
)
);<body>
<div class="wrapper">
<div id="Task1_2">
<h1>Task 1.2</h1>
<label for="separateNumbers">Write more than 10 digits:</label><br/>
<input type="number" id="separateNumbers" placeholder=" i.e. 12345678901234567">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>我不明白为什么这不起作用。我试图用
替换最后一行代码document.getElementById('separateNumbers').value = displayNumber;
但后来我在控制台中得到了这个：
The specified value "87 6178 1" is not a valid number.
The value must match to the following regular expression:
-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?.
无论我输入什么数字组合，都会出现这种情况。不幸的是，我还不了解正则表达式，所以我什至不知道什么是有效值...
【问题讨论】：
对我来说很好......我使用blur事件顺便说一句：jsfiddle.net/k5fxu4ff
【参考方案1】：
数字中没有空格。将您的输入更改为type = text，它应该可以工作
【讨论】：
非常感谢！我怀疑这可能会很小，以至于我看不到它，但已经为此浪费了几个小时。再次感谢。【参考方案2】：将类型更改为文本，因为在文本格式中添加空格不起作用
$(document).ready(function()
// Displaying new input value (adding spaces) -- Solution
$("#separateNumbers").change(function()
$inputTwo = $('#separateNumbers');
var inputNumber = $inputTwo.val();
var separatedNumbers = [];
var part1 = inputNumber.substring(0, 2);
separatedNumbers.push(part1);
for (var i = 2; i < inputNumber.length; i += 4)
separatedNumbers.push(inputNumber.substring(i, i + 4))
var displayNumber = separatedNumbers.join(' ');
$inputTwo.val(displayNumber);
);
);<body>
<div class="wrapper">
<div id="Task1_2">
<h1>Task 1.2</h1>
<label for="separateNumbers">Write more than 10 digits:</label><br/>
<input type="text" id="separateNumbers" placeholder=" i.e. 12345678901234567">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>【讨论】：
以上是关于显示新的输入值（添加空格）的主要内容，如果未能解决你的问题，请参考以下文章