从 javascript 访问时，HTML 输入 type="number" 仍然返回一个字符串

Posted 2023-02-22

技术标签:

【中文标题】从 javascript 访问时，HTML 输入 type="number" 仍然返回一个字符串【英文标题】：HTML input type="number" still returning a string when accessed from javascript 【发布时间】：2016-06-17 22:27:00 【问题描述】：

我是 javascript 新手，我正在尝试学习 JS 中的函数等，并尝试添加 2 个数字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS ADD</title>
</head>

<body>

  <h1>Funcitons is JS</h1>


  <input type="number" id="num1">
  <input type="number" id="num2">

  <button type="button" onclick="addNumAction()">
    Add
  </button>

  <script>
    function addNum(n1, n2) 
      return parseInt(n1) + parseInt(n2);
    

    function addNumAction() 
      var n1 = document.getElementById("num1").value;
      var n2 = document.getElementById("num2").value;

      var sum = addNum(n1, n2);
      window.alert("" + sum);

    
  </script>

</body>

</html>

如果我删除 parseInt() 值仅被视为字符串，那么使用 <input type="number"> 有什么意义？请向我解释。使用什么字段来获取数字输入？

【问题讨论】：

w3.org/TR/html5/forms.html#number-state-(type=number) - 查看规范您无能为力。 HTML Input 元素被记录为返回表示数字的字符串类型的值。请参阅下面的解释。 【参考方案1】：

你得到一个字符串是正常的。

数字类型的目的是移动浏览器使用它来显示正确的键盘，而一些浏览器使用它来进行验证。例如email 类型将显示带有@ 和'.' 的键盘。在键盘上，number 将显示一个数字键盘。

【讨论】：

有什么方法可以将输入作为数字获取，可以像 javascript 数字数据类型一样使用，或者作为字符串接收并转换标准方式来执行此操作？在这种情况下你将不得不使用 parseInt。如果这回答了你的问题，你介意接受这个答案吗？ @SainathS.R 请检查 secretgenes 答案中的链接。一个数字可以有许多不同的格式，但仍然是一个数字。好消息是 JavaScript 不会隐藏实际值。 <input type="number"> 和其他一些类型的目的也是为了在valueAsNumber 属性中提供有用的值。【参考方案2】：

HTML 和 HTTP 都没有真正的数据类型的概念（可能是因为它们一开始就不是编程语言），而且一切都是字符串。当您使用另一种语言来获取该信息时，您有时可能会获得一些 magic 作为功能（例如，php 将从 GET/POST 字段生成数组，这些字段的名称上有成对的方括号）但是这是其他语言的特点。

在这种情况下，.value 属于 DOM API，而此类 API 确实有 types。但是让我们看看它是如何定义的。 <input> 标记由HTMLInputElement interface 表示，value 属性为type DOMString：

DOMString 是一个 UTF-16 字符串。由于 JavaScript 已经使用了这样的字符串， DOMString 直接映射到 String。

换句话说，type="number" 是实现客户端验证和适当 GUI 控件的提示，但底层元素仍将存储字符串。

【讨论】：

【参考方案3】：

tl;dr 你已经正确地做所有事情了，继续使用 parseInt。

type="number" 告诉浏览器应该只允许用户输入数字字符，但在内心深处，它仍然是一个文本字段。

【讨论】：

这应该是公认的答案，因为它就是这样。【参考方案4】：

记录了 HTML 输入元素以返回表示数字的字符串。请参阅此处的文档：Documentation of HTML Input

当您设置输入类型=“数字”时，这些输入字段不接受非数字输入，但同时它不会使输入值类型为“数字”。原因是输入的数字包含数字作为有效字符的子集，但它们也包含完全非数字的字符，如空格、连字符和括号。

【讨论】：

链接已损坏。【参考方案5】：

您可以使用valueAsNumber（在该页面上描述）来获取实际数值。所以你的代码将是：

function addNum(n1, n2) 
  return n1 + n2;


function addNumAction() 
  var n1 = document.getElementById("num1").valueAsNumber;
  var n2 = document.getElementById("num2").valueAsNumber;

  var sum = addNum(n1, n2);
  window.alert("" + sum);

【讨论】：

【参考方案6】：

使用`valueAsNumber`

仍然可以输入非数字。确保检查有效性，并处理错误。

const value = myInput.valueAsNumber
if (isNaN(value)) return // or other handling

如果您需要更新每次更改：

myInput.addEventListener("change", () => 
    const newValue = myInput.valueAsNumber
    if (isNan(newValue)) return

    // Handle change
)

【讨论】：

【参考方案7】：

type="number" 仅用于浏览器验证。但是你得到一个字符串。您可以在字符串前使用parseInt(num1) 或+。

function addNum(n1, n2) 
  return +(n1) + +(n2);

【讨论】：

parseInt(num1) 不指定基数是自找麻烦的定义。对于十进制数，请使用 parseInt(num1, 10) - 或使用加号技巧将字符串转换为数字。什么是“基数”，它为什么自找麻烦？基数是数字系统的基数 (en.wikipedia.org/wiki/Radix)，因此 radix=16 将解析十六进制数，radix=2 二进制和 radix=10 十进制。通常你会使用 radix=10。 type="number" 不仅用于浏览器验证，还用于 valueAsNumber。您还可以根据 type 属性编写自己的 inputCheck 函数，该函数将检查类型并将字符串转换为数字和模式检查【参考方案8】：

您也可以尝试使用+ 运算符将数字字符串转换为数字：

const ns = '3'
console.log(typeof ns)
console.log(typeof +ns)

或者，只有当它能够这样做时，您才能安全地转换：

const ns = '3'
const s = 'hello'

const toNum = v => !!+v ? +v : v

console.log(typeof toNum(ns))
console.log(typeof toNum(s))

上面的 sn-p 使用+ 将值转换为数字。如果它不能这样做，+v 返回NaN。然后它使用! 将NaN 转换为布尔值，然后使用另一个! 来否定布尔值。

【讨论】：

以上是关于从 javascript 访问时，HTML 输入 type="number" 仍然返回一个字符串的主要内容，如果未能解决你的问题，请参考以下文章

从内容页面访问母版页控件（html：输入）不起作用

从 HTML 文件访问捆绑的 javascript（使用 webpack）中的函数

从 JavaScript 访问麦克风输入

访问html表单JavaScript中文本输入字段值的最简单方法？

从动态输入字段 JavaScript 读取文本

使用 jQuery 或纯 Javascript 访问一组 HTML 输入文本框

从 javascript 访问时，HTML 输入 type="number" 仍然返回一个字符串

使用valueAsNumber

使用`valueAsNumber`