从 javascript 访问时,HTML input type="number" 仍然返回一个字符串

新手上路,请多包涵

我是 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"> 有什么意义?请向我解释。用于获取数字输入的字段是什么?

原文由 Sainath S.R 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 825
2 个回答

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

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

原文由 Arno Chauveau 发布,翻译遵循 CC BY-SA 3.0 许可协议

HTML 和 HTTP 都没有数据类型的概念(可能是因为它们一开始就不是编程语言),一切都是字符串。当您使用另一种语言来获取该信息时,您有时可能会获得一些 神奇 的功能(例如,PHP 将从 GET/POST 字段生成数组,这些字段的名称上有成对的方括号)但这是其他语言的功能.

在这种情况下, .value 属于 DOM API 并且此类 API 确实具有 类型。但是让我们看看它是如何定义的。 The <input> tag is represented by the HTMLInputElement interface and the value property is of type DOMString :

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

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

数字键盘屏幕截图

原文由 Álvaro González 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题