JavaScript获取input输入框内容的常用方法
更新时间：2025年12月08日 09:53:54 作者：AI老李
在 JavaScript 中,获取 <input> 输入框内容是常见的操作,可以通过原生 JavaScript 或结合 jQuery 等库实现,以下是详细的中文讲解,介绍几种常用的获取 <input> 内容的方法,包含代码示例、使用场景和注意事项,需要的朋友可以参考下
1.原生 JavaScript 方法
方法 1：通过value属性
- 描述：使用 DOM 对象的 value 属性直接获取输入框的值。
- 适用场景：最简单、直接的方法，适用于所有输入类型（如
text、password、email等）。 - 代码示例：
// HTML: <input type="text" id="myInput">
const input = document.getElementById('myInput');
const value = input.value;
console.log(value); // 输出输入框内容
- 说明：
value属性返回字符串，空输入框返回空字符串""。
方法 2：通过事件监听（如input或change）
- 描述：监听输入框的
input或change事件，实时或在失焦时获取值。 - 适用场景：需要动态响应用户输入，如实时验证或搜索建议。
- 代码示例：
// HTML: <input type="text" id="myInput">
const input = document.getElementById('myInput');
// 实时监听（每次输入触发）
input.addEventListener('input', function() {
console.log('实时输入:', this.value);
});
// 失焦时触发
input.addEventListener('change', function() {
console.log('失焦后值:', this.value);
});
- 说明：
input事件：每次输入内容变化时触发，适合实时反馈。change事件：输入框失焦（blur）时触发，适合提交最终值。
方法 3：通过querySelector选择器
- 描述：使用
document.querySelector或document.querySelectorAll按 CSS 选择器获取输入框。 - 适用场景：当没有明确 ID 或需要选择多个输入框时。
- 代码示例：
// HTML: <input type="text" class="user-input" name="username">
const input = document.querySelector('.user-input');
console.log(input.value); // 输出输入框内容
// 获取所有 name="username" 的输入框
const inputs = document.querySelectorAll('input[name="username"]');
inputs.forEach(input => console.log(input.value));
- 说明：灵活选择特定输入框，适合复杂 DOM 结构。
方法 4：通过表单的FormData
- 描述：从
<form>表单中获取所有输入框的值，适用于提交表单数据。 - 适用场景：处理包含多个输入框的表单，如登录或注册页面。
- 代码示例：
// HTML: <form id="myForm"><input type="text" name="username"><input type="password" name="password"></form>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交
const formData = new FormData(form);
console.log(formData.get('username')); // 获取 username 输入框的值
console.log(formData.get('password')); // 获取 password 输入框的值
});
- 说明：
FormData按name属性获取值，适合批量处理表单数据。
2.使用 jQuery 方法
方法 5：通过 jQuery 的val()方法
- 描述：使用 jQuery 的
val()方法获取或设置输入框的值。 - 适用场景：项目已使用 jQuery，需简洁操作 DOM。
- 代码示例：
// HTML: <input type="text" id="myInput" class="user-input">
$(document).ready(function() {
// 获取值
const value = $('#myInput').val();
console.log(value);
// 监听变化
$('.user-input').on('input', function() {
console.log('实时输入:', $(this).val());
});
// 设置值
$('#myInput').val('新值');
});
- 说明：
val()无参数时获取值，有参数时设置值。- 支持选择器（如
#id、.class），灵活性高。 - 需要引入 jQuery 库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3.综合示例
以下是一个结合多种方法的完整示例，展示如何获取和处理输入框内容：
<!DOCTYPE html>
<html>
<head>
<title>获取输入框内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" id="username" name="username" placeholder="请输入用户名">
<button type="submit">提交</button>
</form>
<script>
// 方法 1: 原生 value
const input = document.getElementById('username');
console.log('初始值:', input.value);
// 方法 2: 事件监听
input.addEventListener('input', function() {
console.log('实时输入:', this.value);
});
// 方法 3: querySelector
const inputByClass = document.querySelector('#username');
console.log('通过选择器:', inputByClass.value);
// 方法 4: FormData
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
console.log('FormData 获取:', formData.get('username'));
});
// 方法 5: jQuery
$(document).ready(function() {
$('#username').on('change', function() {
console.log('jQuery 获取:', $(this).val());
});
});
</script>
</body>
</html>
4.方法对比
| 方法 | 依赖 | 优点 | 缺点 |
|---|---|---|---|
value 属性 | 无 | 简单直接，性能高 | 需要手动获取 DOM 元素 |
| 事件监听 | 无 | 支持动态响应，实时获取 | 需额外事件处理逻辑 |
querySelector | 无 | 灵活选择，支持复杂 DOM | 选择器语法需熟悉 |
FormData | 无 | 适合表单批量处理，现代化 API | 只适用于表单元素 |
jQuery val() | jQuery | 简洁，链式操作，跨浏览器兼容 | 需引入 jQuery，增加资源加载 |
5.注意事项
- 空值处理：输入框为空时，
value或val()返回空字符串""，需检查以避免逻辑错误。
if (input.value.trim() === '') {
console.log('输入为空！');
}
- 输入类型：
- 不同类型（如
checkbox、radio）的获取方式不同：- Checkbox：
input.checked或$('#checkbox').prop('checked')。 - File：
input.files或$('#fileInput')[0].files。
- Checkbox：
- 不同类型（如
- 性能：
- 原生方法性能优于 jQuery，适合轻量项目。
- 频繁操作 DOM（如实时监听）建议防抖（debounce）：
let timeout;
input.addEventListener('input', function() {
clearTimeout(timeout);
timeout = setTimeout(() => console.log(this.value), 300);
});
- 安全性：获取用户输入后，需防止 XSS 攻击，建议过滤或转义：
const safeValue = input.value.replace(/[<>]/g, ''); // 简单过滤
- 兼容性：原生方法（如
value、FormData）现代浏览器全支持；jQuery 需确保引入正确版本。
6.总结
- 首选方法：原生
value属性，简单高效，适用于大多数场景。 - 动态场景：使用
input或change事件监听，结合FormData处理表单。 - jQuery 项目：
val()方法简洁，适合已有 jQuery 环境。 - 选择依据：
- 无依赖需求：用原生 JavaScript。
- 复杂表单：用
FormData。 - jQuery 项目：用
val()和事件绑定。
根据项目需求和是否引入 jQuery 选择合适方法。
如果需要特定场景的代码（如处理特定输入类型、结合 AJAX 提交），或其他 JavaScript 相关问题，请提供更多细节，我可以进一步优化回答！
以上就是JavaScript获取input输入框内容的常用方法的详细内容，更多关于JavaScript获取input内容的资料请关注脚本之家其它相关文章！
相关文章
在 UniApp中,自定义TabBar是指替换默认的Tab栏以实现更多个性化的设计,自定义 TabBar 可以通过创建一个新的组件来实现,并在页面中引用该组件,下面给大家介绍在uniapp中custombar的使用步骤,感兴趣的朋友一起看看吧2024-05-05
这篇文章给大家分享基于js设置随机出现2个数字的实例代码，在文章下面给分享js产生随机数的几个用法介绍，感兴趣的朋友一起看看吧2017-07-07
JavaScript创建一个object对象并操作对象属性的用法
这篇文章主要介绍了JavaScript创建一个object对象并操作对象属性的用法,实例分析了javascript使用object类定义对象及属性的用法,需要的朋友可以参考下2015-03-03
本文通过实例代码很详细的给大家介绍了js中的多态，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要为大家详细介绍了JS面向对象之多选框实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
本篇文章主要介绍了requirejs按需加载angularjs文件实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了JS实现批量上传文件并显示进度功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
一般来说，我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成。2010-10-10
DOM (Document Object Model) 的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,这篇文章主要给大家介绍了关于JavaScript是如何影响DOM树构建的相关资料,需要的朋友可以参考下2021-08-08
在现代网页设计中,文本是网页中最重要的内容之一,然而,当文本超出其容器的大小时,会发生文本溢出的问题,文本溢出不仅会影响网页的视觉效果,还会影响网页的可读性和可用性,所以本文给大家介绍了前端实现文本溢出展开和收起功能的方法,需要的朋友可以参考下2025-04-04
最新评论