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

Question

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

Answer 1

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

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

Answer 2

tl;dr 你已经把所有事情都做对了，继续使用 parseInt。

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

Answer 3

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

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

Answer 4

HTML 输入元素记录为 return 表示数字的字符串。请参阅此处的文档：Documentation of HTML Input
当您设置输入类型="number"时，这些输入字段不接受非数字输入，但同时它不会使输入值类型为"number".原因是输入的数字包含数字作为有效字符的子集，但它们也包含完全非数字字符，如空格、连字符和括号。

Answer 5

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

在这种情况下，.value 属于 DOM API 并且 API 确实有 types. But let's see how it's defined. The <input> tag is represented by the HTMLInputElement interface and the value property is of type DOMString:

DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.

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

Answer 6

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

}

Answer 7

使用`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
})

Answer 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))

上面的代码片段使用 + 将值转换为数字。如果无法这样做，+v returns NaN。然后它使用 ! 将 NaN 转换为布尔值，然后使用另一个 ! 取反布尔值。

Answer 9

如果您在 html 中使用变量，请尝试以下操作：

    <input type="number" (focusout)="(modifiedVal = +modifiedVal)" value="modifiedVal">

这里modifiedVal是变量，variable前的'+'将变量转换成数字。

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

HTML input type="number" still returning a string when accessed from javascript

html

javascript

numbers

input

web

使用`valueAsNumber`

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

HTML input type="number" still returning a string when accessed from javascript

html

javascript

numbers

input

web

使用valueAsNumber

使用`valueAsNumber`