Question

我正在输入只接受数字，点和逗号的输入;但由于某种原因，我不能让输入接受逗号和句号。

目前无效的代码：

$('.numberType').keypress(function(key) {
    if (key.charCode == 188 || key.charCode == 190) return true;
    if (key.charCode <   48 || key.charCode >   57) return false;
})

Answer 1

这通常不是一个好主意，特别是从UX的角度来看。

例如，如何删除字符？您必须允许退格键和del键。箭头键怎么样？负数怎么样？如果您允许使用减号，那么如果用户键入类似“327-762”的内容会怎么样？

我会说放弃这个并在提交时进行验证，或者在blur事件上进行验证。但是如果没有验证某些内容，请不要强调焦点重新输入，服务器也必须进行验证，无论如何都不能信任用户输入。

如果您确实想要沿着这条路走下去，就像@Adjit所说的那样，您需要使用代码44和46。

Answer 2

您使用错误的字符代码表示逗号和句点。您可以通过添加console.log语句并查看哪些char代码属于哪些键

来对此进行测试

＆＃13;

$('.numberType').keypress(function(key) {
  console.log(key.charCode);
  if(key.charCode == 44 || key.charCode == 46) return true;
  if(key.charCode < 48 || key.charCode > 57) return false;
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="numberType"/>

＆＃13;

Answer 3

在提交表单时，使用输入中的pattern属性来处理验证。

<form name="input-pattern-form-example">
  <label>Number:</label>
  <input type="text" name="number-value" title="Number value"
         pattern="^(?=.)(\d{1,3}(,\d{3})*)?(\.\d+)?$" />
  <input type="submit">
</form>

您可以在此处使用某些模式进行验证。

Regular expression to match numbers with or without commas and decimals in text

以下是上例中使用的模式：

#Commas required
#Cannot be empty
#Pass: (1,000.100), (.001)
#Fail: (1000), ()
^(?=.)(\d{1,3}(,\d{3})*)?(\.\d+)?$

Answer 4

虽然我接受它并不一定是你想要的，但由于潜在的浏览器要求，样式或特定限制，这里是一个不使用JS的HTML5解决方案：

<input pattern="^[0-9,\.]*$" />

这使用正则表达式（RegEx）来指定允许的内容，并且应该在没有JS的情况下运行本机。

请注意，虽然HTML5规范表明该模式始终固定在开始和结束，而不需要^和$，但Chrome和Firefox仅在开始时锚定，而不是^。两者都将作为RegEx中的锚点，因此我已将两者都包括在内。

允许插入逗号和点输入字段

4 个答案: