Question

如果我有input[type=number]，则Chrome允许我输入不仅包括数字，还可以输入-（减号）等字符作为负数。而且似乎你实际上可以输入多个 - 减号和点，例如：".....---888"。当发生这种情况时，在on-change事件中，event.target.value的属性将是一个空字符串（因为它不是有效数字）。但是我希望验证消息出现，告诉用户必须输入实际的数字。

所以问题是：我如何阅读实际值，即输入字段中显示的值，因为看起来，有时它与event.target.value <不一样/ p>

我不知道这是否重要 - 这是在React app中

Answer 1

您可以使用event.target.validity.valid甚至更好的event.target.validity.badInput属性来检查值是否有效。
（虽然IE似乎不支持badInput ）

但我会使用input事件而不是change事件，因为如果用户在空<input>元素处开始时输入无效输入，那么change事件由于value被视为空（由于无效），因此不会触发

或者，您可以使用css :invalid选择器并使用它来显示隐藏的消息（需要特定的html结构）

input[type="number"] ~ span.message{display:none;}
input[type="number"]:invalid ~ span.message{display:block;}

Answer 2

使用模仿[type=number]一个的隐藏输入：

＆＃13;

var numberInput = document.querySelector('input[type=number]');
var dolly = document.querySelector('input[hidden]');
numberInput.addEventListener('keyup', (event) => {
  if (event.key !== 'Backspace') {
    dolly.value += event.key;
  } else {
    dolly.value = dolly.value.substr(0, dolly.value.length - 1);
  }
  console.log(dolly.value);
});

＆＃13;

<input type="number">
<input hidden>

＆＃13;

显然，您需要对某些键进行更多处理。通过这种方式，您可以获得number类型的好处，并且还可以维护用户放置的任何疯狂内容。

Answer 3

我不确定是否获取了该值，但由于您要设置自定义验证消息，因此可以使用输入setCustomValidity属性（请参阅文档here）并检查是否存在使用validity.valid属性输入有效。这是我的实施。

＆＃13;

var myInput = document.getElementById("my-input");

myInput.addEventListener("keyup", function (event) {
  if (!myInput.validity.valid) {
    myInput.setCustomValidity("I expect a valid number, darling!");
  } else {
    myInput.setCustomValidity("");
  }
});

＆＃13;

<form>
  <label>Please provide me a number</label>
  <input type="number" id="my-input" name="my-input">
  <button>Submit</button>
</form>

＆＃13;

Answer 4

更新：如果不是数字，input[type=number]将始终返回空，请使用input[type=text]并使用isNaN()检查非数字的值

如何获得＆＃34;真实＆＃34;来自输入的值[type = number]

4 个答案: