如何实现textarea为空时禁用按钮 清空函数触发后状态同步

当前按钮禁用逻辑仅绑定在textarea的keyup事件上，该事件仅会在用户通过键盘操作输入/删除内容时触发。点击clear value按钮时是通过JavaScript直接修改textarea的value属性，不会触发keyup事件，因此按钮状态不会同步更新。
另外原有实现还有两个隐患：

• 仅监听keyup事件无法覆盖右键粘贴/剪切、拖拽文本等非键盘操作的值变更场景
• 使用attr()修改布尔类型的disabled属性，存在DOM属性和页面状态不同步的风险

• 将按钮状态校验逻辑抽离为独立公共函数，所有可能修改textarea值的场景都调用该函数同步按钮状态
• 将原有的keyup事件监听替换为覆盖范围更广的input事件，兼容所有用户输入场景（键盘输入、粘贴、剪切、拖拽文本等）
• 在清空按钮的点击回调中，完成值清空操作后主动调用状态更新函数
• 使用prop()代替attr()操作disabled这个DOM固有布尔属性，避免属性和页面状态不同步的问题

替换原有按钮禁用逻辑和清空按钮事件逻辑即可，其余功能代码无需改动：

// 抽离按钮状态更新公共方法
function updateActionButtonState() {
  // 去除首尾空白字符判断，避免输入全空格时按钮误激活
  const isInputEmpty = $('#inputTextarea').val().trim().length === 0;
  $('.actionTextarea button').prop('disabled', isInputEmpty);
}

// 清空按钮逻辑
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
  inputTextarea.value = '';
  // 清空后主动触发状态更新
  updateActionButtonState();
});

// 页面初始化绑定事件
$(document).ready(function() {
  // 监听input事件，覆盖所有值变更场景
  $('#inputTextarea').on('input', updateActionButtonState);
  // 页面首次加载时执行一次状态校验，适配默认值场景
  updateActionButtonState();
});

修复后无论通过键盘手动删除内容、右键清空内容，还是点击clear value按钮清空内容，只要textarea无有效输入，convert和clear value按钮都会自动切换为禁用状态；仅当textarea存在有效内容时按钮才会激活，完全符合需求。

内容的提问来源于stack exchange，提问作者Maruli Davin