显示新的输入值（添加空格）

Question

即使对于像我这样的新手来说，这似乎也很尴尬，但是在 html 输入中的数字之间添加空格后，在 html 输入字段中显示新值让我非常头疼。基本上，我想要实现的是在用户 "unclicks" 输入后的输入字段中的数字之间添加空格。

例如，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+)?.

无论我输入什么数字组合，它都会出现。不幸的是我还不了解正则表达式，所以我什至不知道什么是有效值...

Answer 1

数字中没有空格。将您的输入更改为 type = text，它应该可以工作

Answer 2

将类型更改为文本，因为添加 space 在文本格式

中不起作用

$(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>

显示新的输入值（添加空格）

Displaying new input value (adding spaces)

javascript

number-formatting