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

IT技术 javascript html web input numbers
2021-01-30 16:50:46

我是 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">什么？请向我解释。使用哪个字段作为数字获取输入？

6个回答

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

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

如果这回答了您的问题，您介意接受答案吗？
2021-03-22 16:50:46
有没有办法将输入作为可以像javascript数字数据类型一样使用的数字，或者作为字符串接收并转换标准方式来做到这一点？
2021-03-24 16:50:46
在这种情况下，您将不得不使用 parseInt。
2021-04-04 16:50:46
@SainathS.R 请查看secretgenes 回答中的链接。一个数字可以有多种不同的格式，但仍然是一个数字。好消息是 JavaScript 不会隐藏实际值。
2021-04-08 16:50:46
的目的<input type="number">和一些其他类型的也提供在一个有用的valuevalueAsNumber属性。
2021-04-11 16:50:46

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

在这种情况下，.value属于 DOM API 并且此类 API 确实具有types。但是让我们看看它是如何定义的。所述<input>标签由表示HTMLInputElement界面和value属性是类型DOMString：

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

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

数字键盘屏幕截图

tl;博士你已经做对了，继续使用parseInt。

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

这应该是公认的答案，因为它正是如此。
2021-03-16 16:50:46

  1. HTML Input 元素被记录为返回表示数字的字符串。请参阅此处的文档：HTML 输入文档

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

链接坏了。
2021-03-24 16:50:46

您可以使用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);

}
其它你可能感兴趣的问题
上一篇jQuery iframe load() 事件？ 下一篇如何使用jquery访问父窗口对象？