Question

当<input>类型的number标签时。订阅了input事件

即使输入字段中有数字值，它也会为输入值""返回+空字符串。

<input type="number" value="123" id="abc"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $("#abc").on('input', function(event) {
      console.log(event.target.value);
    });
  </script>

我只需要知道为什么会发生这种行为，如果在线上有任何资源对其进行解释，那将非常有帮助。预期为'123+'，但返回值为''

我从逻辑上知道返回''是有意义的，但是我需要对此行为进行解释

Answer 1

根据mdn输入类型的数字会自动使不是数字的条目无效。

$("#abc").on('input', function(event) {
  console.log(event.target.value);
});

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

<input type="number" value="123" id="abc" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Answer 2

最好使用输入类型的文本并验证输入类型以接受数字和特殊字符（+，-等）。

已经报道了相同的错误，许多浏览器供应商对于将字符放在输入类型编号上存在分歧。

bugzila link for the same problem

Answer 3

如类型所建议，对于输入类型“数字”，除数字以外的所有其他输入均被视为无效输入。因此，无论您键入什么内容，在非数字值的情况下都将得到空字符串。如果您想确定这些无效输入，则可以使用此替代方法。

$("#abc").on('input', function (event) {
        // Any Non-numeric value 
        if (this.validity.badInput) {
             console.log('Bad',event.target.value);
        }else{
                console.log('OK',event.target.value);
        }
    });

输入类型编号对于在运算符（+，-）上的事件输入返回null

3 个答案: