如何用JavaScript在输入长度不达标时禁用.btn-next按钮？求助

原代码存在的问题 #

• 事件选择错误：change事件仅在输入框失去焦点时触发，无法实时响应输入内容的变化，满足不了实时校验的需求。
• 判断逻辑偏离需求：原代码判断输入值等于字符串"5"，但你的需求是内容未达到特定字符数时禁用按钮，应该检查输入内容的长度是否小于目标字符数。
• 冗余DOM查询：在stateHandle函数中重复调用document.querySelector(".viewbox")，完全可以直接使用已提前获取的viewBox变量，提升性能。

修正后的代码 #

假设你要求的特定字符数为5，以下是可行的实现代码：

let viewBox = document.querySelector(".viewbox");
let btnNext = document.querySelector(".btn-next");

// 页面初始化时先设置按钮的初始状态
btnNext.disabled = viewBox.value.length < 5;

// 监听input事件，实时响应输入内容变化
viewBox.addEventListener("input", stateHandle);

function stateHandle() {
    // 根据输入内容长度判断是否禁用按钮
    btnNext.disabled = viewBox.value.length < 5;
}

补充说明 #

• 如果你的目标字符数不是5，只需将代码中的5替换为你需要的数字即可。
• 页面初始化时的状态设置很关键，避免输入框已有内容但按钮状态未同步的问题。

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