Question

即使是像我这样的新手，这似乎很尴尬，但是在html输入中的数字之间添加空格之后，我在html输入字段中显示新值时非常头疼。基本上，我想要实现的是在用户＆＃34; unlicks＆＃34;之后在输入字段中的数字之间添加空格。输入。

例如，123456789123456789将更改为12 3456 7891 2345 6789。我得到用户输入的值并在我想要的地方添加空格，但我不能让它出现在输入字段中。我的代码如下所示：

＆＃13;

'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);
    })
});

＆＃13;

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

＆＃13;

我不明白为什么这不起作用。我试图用

替换最后一行代码

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

将类型更改为文本，因为添加空格不适用于文本格式

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: