JavaScript实时获取输入框值：如何实现输入5字符才启用按钮？

核心思路 #

通过监听输入框的input事件实时获取输入内容，根据内容长度判断是否启用按钮，刚好匹配你需要的功能逻辑。

代码实现 #

HTML结构

先搭建基础的输入框和按钮：

<input type="text" id="wordInput" placeholder="输入5个字母的单词">
<button id="actionBtn" disabled>执行功能</button>

按钮初始设置disabled属性，默认处于禁用状态。

JavaScript逻辑

添加事件监听处理实时输入：

// 获取DOM元素
const wordInput = document.getElementById('wordInput');
const actionBtn = document.getElementById('actionBtn');

// 监听输入框的input事件（内容变化时实时触发）
wordInput.addEventListener('input', function() {
  // 实时获取输入框的值，去除首尾空格避免干扰
  const inputValue = this.value.trim();
  // 根据输入长度切换按钮禁用状态
  actionBtn.disabled = inputValue.length !== 5;
});

关键说明 #

• input事件会覆盖键盘输入、粘贴、删除等所有内容变更场景，完全满足实时获取值的需求。
• 用trim()过滤首尾空格，确保统计的是有效字母长度。
• 直接修改按钮的disabled属性，一步实现长度不符时禁用、符合时启用的逻辑。

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