咨询：当textarea输入指定内容时为提交按钮添加类的JQuery问题

原代码存在的问题 #

• 仅在页面初始化时执行一次检查：$(document).ready()里的代码只会在页面加载完成后运行一次，用户后续在textarea输入内容时不会触发判断逻辑。
• 获取textarea内容的方法错误：textarea属于表单元素，需要用val()方法获取输入值，而不是text()（text()适用于获取普通元素的文本内容）。
• 选择器存在冗余空格：$(" .submit_form_field")中的前置空格无意义，规范写法应为$(".submit_form_field")。

修复后的代码 #

HTML部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

JavaScript部分

$(document).ready(function () {
  // 监听textarea的输入事件，每次内容变化时触发检查
  $("#write_text_id").on('input', function() {
    const targetText = "Saurav & Kunal Are God";
    // 用val()获取textarea的实时输入值
    if ($(this).val() === targetText) {
      $(".submit_form_field").addClass('item-3');
    } else {
      // 可选：输入内容不匹配时移除类，恢复初始状态
      $(".submit_form_field").removeClass('item-3');
    }
  });
});

说明 #

• 使用input事件可以覆盖用户的所有输入操作（键盘输入、粘贴、删除等），确保每次内容变更都能触发判断。
• 添加removeClass逻辑后，当用户修改内容不再匹配目标文本时，按钮会自动移除item-3类，交互逻辑更完整。

内容的提问来源于stack exchange，提问作者The Destiny