JavaScript获取文本框值遇null问题：正确属性咨询

你console输出null的核心原因大概率是没正确获取到输入框元素，或者在DOM还没加载完成时就执行了获取元素的代码。先给你一个能正常工作的完整示例：

完整代码示例 #

HTML #

<input type="text" id="usernameInput" placeholder="请输入用户名">
<button id="printBtn">打印用户名</button>

JavaScript #

// 等待DOM完全加载后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const usernameInput = document.getElementById('usernameInput');
  const printBtn = document.getElementById('printBtn');

  printBtn.addEventListener('click', () => {
    console.log(usernameInput.value); // 正常输出输入值
  });
});

关于VSCode里看不到value属性提示的问题：如果是用document.getElementById或querySelector获取元素，VSCode的智能提示可能因为无法确定元素类型而不显示value。你可以通过类型注释（JS里也能生效）来触发正确提示：

/** @type {HTMLInputElement} */
const usernameInput = document.getElementById('usernameInput');

除value外，输入框常用的属性 #

• type: 获取/设置输入框类型（如text、password、email）
• placeholder: 获取/设置输入框的占位提示文本
• disabled: 控制输入框是否禁用（布尔值，true为禁用）
• readOnly: 控制输入框是否只读（布尔值，true为只读）
• maxLength: 获取/设置输入允许的最大字符数
• minLength: 获取/设置输入允许的最小字符数
• name: 获取/设置表单提交时的字段名称
• defaultValue: 获取输入框的初始默认值（页面加载时的预设值）
• checked: 针对单选框/复选框，获取/设置选中状态（布尔值）
• required: 控制输入框是否为表单必填项（布尔值）

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