jQuery实现点击删除按钮逐个移除textarea内数字且空值时禁用删除按钮

现有代码的问题梳理 #

• 已实现的可用逻辑：点击.my_button类的数字按钮，会把对应数值追加到#input文本域中，输入内容长度到2时尝试禁用数字按钮
• 待修正的逻辑缺陷：
  • 删除按钮当前点击后直接清空整个输入域，不符合逐位删除最后一个字符的需求
  • 输入域为空时，删除按钮未做禁用处理，空状态下点击无效
  • 原代码通过unbind('click')解绑数字按钮事件的方式存在硬伤：解绑后即使删除了输入内容，数字按钮也无法恢复点击

需求落地实现 #

两个核心需求的实现思路：

1. 逐位删除：获取当前输入域的内容，截取掉最后一位后重新赋值，替换原有的全量清空逻辑
2. 状态联动：统一封装按钮状态判断逻辑，不管是输入数字还是执行删除操作后，自动根据输入域的内容长度更新数字按钮、删除按钮的可用状态

修正后的完整代码 #

优化后的jQuery代码 #

$(document).ready(function() {
  // 统一更新按钮可用状态的公共方法
  function refreshBtnState() {
    const inputContent = $('#input').val();
    const contentLength = inputContent.length;

    // 数字按钮状态：内容长度≥2时禁用，否则启用
    if (contentLength >= 2) {
      $('.my_button').prop('disabled', true);
    } else {
      $('.my_button').prop('disabled', false);
    }

    // 删除按钮状态：内容为空时禁用，否则启用
    if (contentLength === 0) {
      $('#delete').prop('disabled', true);
    } else {
      $('#delete').prop('disabled', false);
    }
  }

  // 页面初次加载时初始化按钮状态
  refreshBtnState();

  // 数字按钮点击逻辑
  $('.my_button').click(function() {
    const inputNum = $(this).val();
    // 向输入域追加数字
    $('#input').val($('#input').val() + inputNum);
    // 更新按钮状态
    refreshBtnState();
  });

  // 删除按钮点击逻辑
  $('#delete').click(function() {
    const currentContent = $('#input').val();
    // 截取去掉最后一位的内容重新赋值
    $('#input').val(currentContent.slice(0, -1));
    // 更新按钮状态
    refreshBtnState();
  });
});

原有HTML结构无需修改 #

<div class="btn">
  <button class="my_button" name="buttonName" value="1">1</button>
  <button class="my_button" name="buttonName" value="2">2</button>
  <button class="my_button" name="buttonName" value="3">3</button>
  <button class="my_button" name="buttonName" value="4">4</button>
  <button class="my_button" name="buttonName" value="5">5</button>
  <button class="my_button" name="buttonName" value="6">6</button>
  <button class="my_button" name="buttonName" value="7">7</button>
  <button class="my_button" name="buttonName" value="8">8</button>
  <button class="my_button" name="buttonName" value="9">9</button>
</div>

<textarea id="input"></textarea>
<button id="delete" name="delete">delete</button>

实现要点说明 #

• 逐位删除核心逻辑：通过字符串的slice(0, -1)方法自动截取除最后一位的内容，不需要额外做长度判断，搭配删除按钮的禁用逻辑，不会出现空字符串截取报错的问题
• 状态控制替换：使用prop('disabled', 布尔值)的方式控制按钮可用状态，替代原有的事件解绑逻辑，避免事件被永久移除导致的功能失效问题
• 状态同步：每次触发输入、删除操作后都调用公共状态更新方法，保证数字按钮、删除按钮的状态始终和输入域的实际内容长度匹配，不会出现状态不同步的问题
• 初始状态兜底：页面加载完成后立刻执行一次状态更新，让输入域为空时删除按钮初始就处于禁用状态，不需要等用户第一次操作后才生效

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