如何在搜索框为空或仅含空格时禁用搜索提交（回车、按钮）

核心需求 #

• 搜索输入框内容为空、或仅包含空白字符时，拦截所有提交触发渠道
• 覆盖的提交场景：输入框回车提交、提交按钮点击提交
• 页面初始加载时即生效，纯空格输入判定为无效内容

原有代码存在的问题 #

• 未对输入值做trim()去首尾空白处理，纯空格输入会被误判为有效内容
• 未做初始化状态设置，页面刚加载完成时提交按钮默认可点击，存在空提交漏洞
• 仅绑定keyup事件做校验，无法覆盖右键粘贴、内容拖拽、输入法输入、剪切删除等非键盘输入场景
• 未拦截表单原生submit事件，无法阻断回车触发的表单提交
• 使用attr()/removeAttr()控制disabled属性，在jQuery中处理表单布尔属性时容易出现状态不同步问题，推荐使用prop()方法

完整实现代码 #

表单结构（示例） #

<form id="example_form" class="example_form">
  <input class="form_input" type="text" placeholder="Search.." name="search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

jQuery逻辑代码 #

$(document).ready(function() {
  // 缓存DOM元素，避免重复查询
  const $searchInput = $('.form_input');
  const $submitBtn = $('button[type="submit"]');
  const $searchForm = $('#example_form');

  // 校验输入内容有效性：去除首尾空白后判断长度
  function isInputValid() {
    return $searchInput.val().trim().length > 0;
  }

  // 同步更新提交按钮可用状态
  function refreshSubmitStatus() {
    $submitBtn.prop('disabled', !isInputValid());
  }

  // 页面初始化时就执行一次状态更新，默认禁用提交按钮
  refreshSubmitStatus();

  // 监听输入值变化，覆盖所有输入场景（键盘、粘贴、拖拽、剪切等）
  $searchInput.on('input', refreshSubmitStatus);

  // 兜底拦截表单提交事件，所有渠道触发的提交都会走这个校验
  $searchForm.on('submit', function(e) {
    if (!isInputValid()) {
      e.preventDefault();
      return false;
    }
  });
});

方案关键点说明 #

• 采用input事件替代原有的keyup事件，只要输入框值发生变化就会触发校验，不会漏判非键盘操作的输入
• 做了双重校验：第一层通过按钮的disabled属性拦截正常点击提交，第二层通过表单submit事件做兜底拦截，覆盖回车提交、脚本触发提交等所有场景
• 所有取值校验都先做trim()处理，首尾全为空白字符的输入会被判定为无效，符合需求
• 初始化时就执行状态校验，不存在加载空窗期
• 使用prop()方法设置disabled属性，兼容所有jQuery版本，不会出现属性显示禁用但实际可点击的异常

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