HTML5中input元素承担着用户输入文本的核心功能，读取其输入的文本数据是前端开发中的基础操作，通过不同的实现方式可以适配多种业务场景。
基础input元素的文本读取方式
最常见的文本输入框是type="text"的input元素，读取其文本的核心是通过元素的value属性获取内容。首先需要给input元素设置唯一的id属性，方便后续通过DOM API获取元素实例。
<!-- 文本输入框结构 --> <input type="text" id="username" placeholder="请输入用户名"> <button id="getBtn">获取输入内容</button> <p id="showResult"></p>
使用原生JavaScript读取文本时，通过document.getElementById方法获取input元素，再访问其value属性即可得到用户输入的内容，示例代码如下：
// 获取按钮元素并绑定点击事件
document.getElementById('getBtn').addEventListener('click', function() {
// 获取input元素
const inputEle = document.getElementById('username');
// 读取value属性得到输入文本
const inputText = inputEle.value;
// 将读取到的文本展示在结果区域
document.getElementById('showResult').innerText = '您输入的内容是：' + inputText;
});
其他类型input元素的文本读取
除了普通的文本输入框，HTML5还提供了多种其他类型的input元素，它们的文本读取逻辑和基本text类型一致，只是输入的内容格式有所不同。
密码输入框读取
type="password"的输入框虽然输入内容会显示为圆点，但读取时同样通过value属性获取原始输入文本，不会受到显示样式的影响。
<input type="password" id="password" placeholder="请输入密码">
const passwordText = document.getElementById('password').value;
console.log('用户输入的密码是：' + passwordText);
多行文本输入框读取
虽然<textarea>不是input元素，但属于常用的文本输入组件，其文本读取方式和input一致，也是通过value属性获取，不过需要注意<textarea>的标签名需要转义为<textarea>。
<textarea id="desc" placeholder="请输入个人描述"></textarea>
const descText = document.getElementById('desc').value;
console.log('用户输入的描述是：' + descText);
实时读取input输入的文本
如果需要实时获取用户输入的内容，不需要等待点击按钮，可以绑定input元素的input事件，每次用户输入内容变化时都会触发回调，实时读取最新文本。
const realTimeInput = document.getElementById('username');
realTimeInput.addEventListener('input', function() {
const currentText = this.value;
console.log('当前实时输入内容：' + currentText);
});
读取时的常见问题与处理
- 空值处理：用户未输入内容时，
value属性返回空字符串，读取后可以根据业务需求判断是否需要提示用户输入。 - 首尾空格处理：用户输入的内容可能包含首尾空格，可以通过
trim()方法去除，示例：const cleanText = inputEle.value.trim(); - 兼容性：
value属性是DOM标准属性，所有支持HTML5的浏览器都支持该读取方式，无需担心兼容性问题。
框架中的读取方式
在Vue、React等前端框架中，通常不需要手动操作DOM获取input的value，而是通过数据绑定的方式同步输入内容。以Vue为例，通过v-model指令绑定数据，数据会自动同步输入框的内容：
<template>
<div>
<input type="text" v-model="inputValue">
<p>绑定的内容：{{ inputValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
此时inputValue变量就实时存储了input元素输入的文本数据，直接使用即可，不需要额外的DOM操作。