如何获取number类型输入框的显示文本（值无效时）

这个问题确实踩了number输入框的一个小坑——当用户输入不符合格式的内容（比如你例子里的0..1）时，input.value会返回空字符串，但我们明明能看到输入框里显示着用户输入的内容，要拿到它其实有个很巧妙的办法：

核心解决方案：临时切换输入框类型 #

我们可以把number输入框临时切换为text类型，此时就能通过value属性获取到用户输入的原始无效文本，之后再切回number类型即可。

示例代码如下：

const numInput = document.getElementById('num');

function getDisplayedValue(input) {
  // 先判断输入是否有效，有效直接返回value即可
  if (input.validity.valid) {
    return input.value;
  }
  
  // 临时切换输入框类型为text
  const originalType = input.type;
  input.type = 'text';
  const displayedText = input.value;
  // 切回原类型
  input.type = originalType;
  
  return displayedText;
}

// 测试：当输入框里是"0..1"时
console.log(getDisplayedValue(numInput)); // 输出 "0..1"

为什么这个方法可行？ #

number输入框在值无效时，浏览器内部其实还是保留了用户输入的原始文本，只是为了符合number类型的规范，对外暴露的value属性返回了空字符串。而当我们把类型切换为text时，浏览器不再做格式校验，会直接把原始文本赋值给value属性，这样我们就能拿到想要的内容了。

注意事项 #

• 切换类型时可能会触发input或change事件，如果你的代码里有监听这些事件的逻辑，可以临时移除监听或者在事件处理函数里做判断，避免不必要的逻辑执行。
• 这个方法在Chrome、Firefox、Safari、Edge等现代主流浏览器中都能正常工作，兼容性不错。

应用场景 #

拿到用户输入的原始无效文本后，你就能做出更友好的验证提示了，比如：

const userInput = getDisplayedValue(numInput);
alert(`您输入的「${userInput}」不是有效的数字格式，请输入类似「0.1」的正确格式哦～`);

内容的提问来源于stack exchange，提问作者PlageMan