用户在文本框中输入的数字值

Question

我需要将用户输入的两个数字相加。为此，我创建了两个输入字段，使用.val()在两个单独的变量中检索值，然后将它们相加。问题是字符串被添加而不是数字。例如：2 + 3成为23而不是5。请建议除了在输入框中使用type = number之外还要做什么。

- Akash

---

可能是重复的问题：JavaScript如何将字符串转换为数字？ - Felix Kling

Answer 1

你可以使用 parseInt(...)。

例如：

var num = parseInt("2", 10) + parseInt("3", 10);
// num == 5

- John Fisher

---

如果用户输入了 2.5 呢？即使您假设只允许输入整数，请不要建议使用 parseInt() 而不使用第二个参数指定十进制，例如 parseInt("2",10)，否则，如果用户输入一个前导零（例如 "077"），它可能（取决于浏览器）被视为八进制；如果用户输入一个前导的 "0x"，它将被视为十六进制。 - nnnnnn

Answer 2

使用parseInt函数将字符串转换为数字：

var a = '2';
var b = '3';
var sum = parseInt(a,10) + parseInt(b,10);
console.log(sum); /* 5 */

请记住，parseInt(str, rad) 只有在 str 实际包含基数为 rad 的数字时才有效，因此如果您想允许其他基数，您需要手动检查它们。还要注意，如果您需要更多的整数之外的数字，您将需要使用 parseFloat。

- Zeta

---

如果 a 是 '2.5' 呢？如果 a 是 '0x77' 或者 '077'，而你没有指定基数呢？ - nnnnnn

@nnnnnn：问题已解决，那是我最早的答案之一，当时我还不知道parseInt的问题。 - Zeta

Answer 3

今天稍微容易一些了。如果你有一个 input[type=number]，你可以简单地使用 input.valueAsNumber。

然而，这并不适用于每种输入类型。对于 input[type=date]，你可以使用 input.valueAsDate。

Array.from(document.querySelectorAll('input')).forEach(input=>{
  input.addEventListener('input', e=>showInputValue(e.currentTarget))
  showInputValue(input)
})

function showInputValue(input) {
  input.nextSibling.textContent = ` // input.valueAsNumber -> ${input.valueAsNumber}`
}

body {
  font-family: monospace;
}
label {
  width: 100%;
  display: flex;
}
span:first-child, input {
  width: 6rem;
  flex: 0 0 6rem;
}
span:last-child {
  flex: 1 0 16rem;
  padding-left: 1rem;
}

<label><span>text: </span><input type="text" value="123"><span></span></label>
<label><span>number: </span><input type="number" value="123"><span></span></label>
<label><span>range: </span><input type="range" value="123"><span></span></label>
<label><span>date: </span><input type="date" value="2022-07-06"><span></span></label>

- Sjeiti

Answer 4

在添加之前，可以使用parseInt（http://www.w3schools.com/jsref/jsref_parseint.asp）或parseFloat（http://www.w3schools.com/jsref/jsref_parsefloat.asp）将其转换为数字值。

附注：这是简单的答案。您可能需要进行一些验证/剥离/修整等操作。

- ndtreviv

Answer 5

Number()是你想要的函数，“123a”返回NAN

parseInt()截断尾随字母，“123a”返回123

<input type="text" id="txtFld" onblur="if(!Number(this.value)){alert('not a number');}" />

• jsfiddle

- hinekyle