如何在HTML数字输入框中显示当前值并通过JS获取该值？

一、设置默认显示数值 #

要让输入框加载后直接显示指定数值（比如23.6），直接给<input>标签添加value属性即可：

<label for="input1">Input 1</label> 
<input type="number" id="input1" name="input1" value="23.6">

二、获取当前输入值的几种方法 #

1. 直接单次取值

通过ID定位到输入框元素后，直接读取value属性即可。注意默认拿到的是字符串类型，需要转数字的话用parseFloat()或Number()处理：

// 获取输入框DOM元素
const input = document.getElementById('input1');
// 获取字符串格式的当前值
const valueStr = input.value;
// 转换为数字格式
const valueNum = parseFloat(input.value);
// 或者用Number()转换
// const valueNum = Number(input.value);

2. 实时动态取值

如果需要在用户输入/修改数值时实时拿到最新值，可以绑定input或change事件：

• input事件：每输入一个字符就触发，适合实时响应
• change事件：输入框失去焦点且值发生变化时触发，适合确认输入完成后取值

代码示例：

const input = document.getElementById('input1');
// 实时监听输入变化
input.addEventListener('input', function() {
  const currentValue = this.value;
  console.log('当前输入值（字符串）：', currentValue);
  // 转成数字使用
  const currentNum = parseFloat(currentValue);
  console.log('当前输入值（数字）：', currentNum);
});

3. 表单内取值（若输入框在表单中）

如果输入框嵌套在<form>标签内，还可以通过表单元素直接获取：

<form id="calcForm">
  <label for="input1">Input 1</label> 
  <input type="number" id="input1" name="input1" value="23.6">
</form>

const form = document.getElementById('calcForm');
const inputValue = form.input1.value;

内容的提问来源于stack exchange，提问作者ronkrem