我来帮你梳理下代码里的问题，一步步搞定这个搜索按钮禁用的功能：

几个关键错误点 #

1. 事件绑定对象错了：你把keyup事件绑在了搜索按钮上，但键盘输入是发生在输入框里的，按钮根本不会响应键盘输入事件，得把事件绑定到#searchBar输入框上才行。
2. 判断逻辑完全不对：你的条件是if (searchButton !== "")，这里的searchButton是DOM按钮元素，永远不可能等于空字符串。正确逻辑应该是获取输入框的内容，判断是否为空。
3. 初始状态没设置：页面刚加载时输入框是空的，按钮应该默认禁用，但你没做这个初始化操作。
4. Disabled属性放错位置：你把disabled加在了按钮内部的<span>标签上，但按钮的禁用状态需要直接在<button>元素上设置，<span>的disabled不会影响按钮的可点击性。

修正后的完整代码 #

Handlebars HTML 部分 #

<div class="searchWrapper"> 
  <form action="/founduser" method="POST" class="searchBar"> 
    <input type="hidden" id="groupid" name="groupid" value={{this.groupid}}> 
    <input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID" value="{{this.term}}" /> 
    <!-- 把disabled移到button上，初始状态设为禁用 -->
    <button type="submit" class="btn-search" id="user-search-btn" disabled>
      <span class="icon search"></span>
    </button> 
  </form> 
</div>

JavaScript 部分 #

const searchButton = document.getElementById('user-search-btn');
const searchInput = document.getElementById('searchBar');

// 判断输入内容并切换按钮状态的函数
const checkInput = () => {
  // 去除首尾空格，避免空空格被误判为有效内容
  const inputValue = searchInput.value.trim();
  // 简化逻辑：输入为空就禁用按钮，否则启用
  searchButton.disabled = inputValue === "";
};

// 页面加载后先执行一次，确保初始状态正确
checkInput();

// 给输入框绑定keyup事件，响应键盘输入
searchInput.addEventListener('keyup', checkInput);
// 额外绑定input事件，覆盖粘贴、右键输入等非键盘操作场景
searchInput.addEventListener('input', checkInput);

额外优化说明 #

• 加入trim()处理输入内容，避免用户只输入空格时按钮被误激活
• 同时绑定input事件，覆盖更多输入场景（比如鼠标粘贴内容），比单纯的keyup更全面

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