首页 > 文章 > 前端

获取输入框值的JS方法有哪些

时间：2026-01-10 18:24:53 223浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《HTML获取输入框值的JavaScript方法》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

获取用户输入数值需按场景选择方法：一、getElementById+value；二、querySelector+value；三、form.elements+name/index；四、监听input事件实时获取；五、FormData批量提取。

HTML如何获取输入框数值_JavaScript取值方法【教程】

如果您在网页中使用HTML创建了输入框，并希望借助JavaScript获取用户输入的数值，需要根据输入框类型和需求选择合适的方法。以下是几种常用的取值方法：

一、通过getElementById获取input元素的value属性

这是最基础且广泛兼容的方式，适用于所有type为text、number、email等常规输入框。JavaScript通过ID定位元素后，直接读取其value属性即可获得当前输入内容。

1、在HTML中为input标签设置唯一的id属性，例如：id="userAge"。

2、在JavaScript中使用document.getElementById("userAge")获取该元素对象。

3、调用该对象的value属性，如：document.getElementById("userAge").value。

4、若需转换为数值类型，可配合parseInt()或parseFloat()，例如：parseInt(document.getElementById("userAge").value)。

当页面结构复杂或需按属性、类名等条件灵活选取输入框时，querySelector提供更强大的选择能力。它支持CSS选择器语法，能精准定位目标input元素。

1、确保input元素具有可识别的特征，如class="price-input"或name="quantity"。

2、使用document.querySelector(".price-input")或document.querySelector("input[name='quantity']")获取元素。

3、读取返回元素的value属性，例如：document.querySelector("input[name='quantity']").value。

4、注意：querySelector仅返回第一个匹配元素，若存在多个需用querySelectorAll并遍历。

当输入框位于

标签内部时，可通过表单对象的elements属性按名称或索引快速访问子控件，适合处理成组输入项。

1、为form标签设置id，如：id="myForm"，同时为input设置name属性，如：name="userName"。

2、使用document.getElementById("myForm").elements["userName"]获取对应input元素。

3、读取其value属性，例如：document.getElementById("myForm").elements["userName"].value。

4、也可用索引方式访问，如elements[0]表示表单中第一个控件。

对于需要动态响应用户输入的场景（如实时校验、计算），应绑定input事件而非仅在提交时读取，确保每次按键后都能捕获最新值。

1、为input元素添加oninput属性，如：oninput="handleInput(this)"。

2、在JavaScript中定义handleInput函数，参数this指向当前触发事件的input元素。

3、在函数内直接使用event.target.value或传入的this.value获取当前输入值。

4、若需区分数字与字符串，可在函数中加入isNaN()判断并做类型转换。

当表单包含多个输入字段且需统一提取所有值时，FormData提供简洁接口，尤其适用于后续发送至服务器的场景。

1、确保整个输入区域被包裹在