如何允许输入数字类型包含空格和逗号

Question

怎样才能允许input type="number"接受像1, 2, 3, 55这样的东西，而不仅仅是普通的带十进制的number。

我尝试使用pattern，但它似乎没有发挥它的魔力，因为它仍然只接受数字和小数。

​

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

Answer 3

看看这个能不能帮到你。模式是正则表达式。查看regex以了解更多定制信息。

<form>
  <input type="text" pattern="([0-9]+.{0,1}[0-9]*,{0,1})*[0-9]" required>
  <input type="submit">
</form>