Question

我遇到了一个奇怪的问题。尝试替换数字输入上的点时，它会清除整个输入。而不是仅替换该点。

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

JSFIDDLE

如何更改它以使其仅去除圆点？

Answer 1

我认为（猜测）是因为您使用type="number"。然后是数字，后跟一个点，例如123.是无效数字，并且val返回空白。

您可以尝试以下方法：

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = this.value.replace(/[^\d,]/g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-input-payment-id="12">

这使用常规文本类型，并在替换中过滤掉除数字以外的任何内容。

修改：
更改了正则表达式以匹配数字和逗号以外的任何内容。

Answer 2

这并不是真正的解决方案，因为我个人希望看到它，但这是我为解决当前问题所做的工作。我更改了JavaScript代码以侦听键控代码46（.），并且在粘贴事件侦听器上返回false，以禁止将值粘贴到输入中。

$("[data-input-payment-id]").on("keypress", function(e) {
  var key = e.charCode ? e.charCode : e.keyCode;
  if (key == 46) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

它至少在Chrome和Edge中有效。

Answer 3

我会

监听keyup事件，而不是input事件。这样，您还可以允许粘贴。
保留先前正确值的记录，以便您可以回滚到它。这是必要的，因为type=number输入将在输入无效（作为数字）后立即将一个空字符串作为值。我会将先前的正确值存储在input元素的 data 属性中
使用属性validity.stepMismatch，您可以知道当前值是否违反了step的{{1}}属性，默认情况下该属性为1。以1为步长，这是表示使用小数点分隔符输入数字将被视为不匹配。
由于尾随的十进制分隔符将不会（至今）产生小数，因此它将通过上述验证。因此，在一切正常之后，将值回显到输入中：这将消除可能键入的任何尾随十进制分隔符。

input

$("[data-input-payment-id]").on("input", function (e) {
    if (!this.validity.stepMismatch) {
        $(this).data("lastValid", $(this).val());
    };
    $(this).val($(this).data("lastValid") || "");  
});

话虽如此，我个人不赞成以这种方式阻止用户输入：他们可能会暂时认为自己的键盘坏了。在我看来，最好允许用户键入任何内容并仅在输入旁边显示一条消息，表明输入无效（直到有效）。

Answer 4

您的Keypress示例给了我这个想法。如果可以截获keypress事件，则可以在添加实际值之前检查所有验证。此示例也不需要任何条件，并且能够过滤任何非数字值。

$("[data-input-payment-id]").on("keypress", function(e) {
  if ((this.value + e.key).match(/\D/)) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  var pasteData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
  pasteData = pasteData.replace(/\D/g, '');
  this.value = this.value + pasteData;
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

允许通过过滤粘贴数据
没有特定条件
可以修改以进行自定义验证

http://jsfiddle.net/xpvt214o/511118/

Answer 5

请参见input类型的number上的MDN docs：

值

代表数字的数字，或者为空

如果输入字符串不能转换为正确的数字（例如，字符串包含两个点），则访问.value属性将返回空字符串。

.value（和val()函数）仍将返回 strings ，但是这些字符串必须表示有效数字（或为空字符串）。与其无条件地设置元素的值，不如先检查该值是否不是空字符串：

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  if (val === '') return;
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

或者您可以使用文本输入，也可以使用pattern：

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input data-input-payment-id="12">
  <input type="submit">
</form>

<form>
<input pattern="^\d+$" data-input-payment-id="12">
<input type="submit">
</form>

Answer 6

$(this).val()返回空字符串，如果使用type="number"的输入具有多个.

您可以通过仅在$(this).val()不返回空字符串的情况下运行替换值来解决此问题。

使用JavaScript替换圆点会删除所有内容

6 个答案: