如何允许输入数字类型具有空格和逗号

Question

您如何允许input type="number"接受类似的内容，1, 2, 3, 55而不只是接受number带小数的常规内容。

我尝试使用模式，但是它似乎并没有发挥作用，因为它仍然只接受数字和小数。

Example:
<input type="number" pattern="[0-9]+([\.,][0-9]+)?">

Desired:
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" value="1, 2, 3, 4">

<input type="number" pattern="[0-9]+([\.,][0-9]+)?">

Answer 1

您应该只使用type = text并使用js对其进行验证/格式化。

$('input').on('change, keyup', function() {
    var currentInput = $(this).val();
    var fixedInput = currentInput.replace(/[A-Za-z!@#$%^&*()]/g, '');
    $(this).val(fixedInput);
    console.log(fixedInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text"/>

Answer 2

您可以使用<input type="text"/>带有一些正则表达式的正则：

var input = document.querySelector('input');
input.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9 \,]/, '');
});

<input type="text"/>

正则表达式含义：

[^0-9 \,]    # any character that's not a digit, a space, or a comma