如何在JavaScript中实现textarea达到最小长度前禁用按钮？

嘿，你的需求很明确，咱们先拆解下你之前代码里的问题：

• 你错误地把获取输入值的.val()换成了.minlength，但minlength是textarea的元素属性，不是输入值的属性，得通过元素本身获取这个要求值；
• 你判断时用了textarea_value < '5'，这里textarea_value是输入的字符串，和字符串'5'比较是按字符编码逻辑走的，不是比较内容长度，而且逻辑搞反了——应该是内容长度小于最小长度时禁用按钮，否则才启用；
• 只监听keyup事件不够全面，比如用户用鼠标粘贴内容时不会触发keyup，换成input事件能覆盖输入、粘贴、删除等所有内容变更场景。

接下来给你两种可行的解决方案：

方案一：jQuery实现 #

$(document).ready(function() {
  const submitBtn = $('input[type="submit"]');
  const textarea = $('#texta');
  // 从textarea的属性里获取最小长度，转成数字避免类型问题
  const minLength = parseInt(textarea.attr('minlength'), 10);

  // 页面加载时就初始化按钮状态，避免初始状态错误
  submitBtn.attr('disabled', textarea.val().length < minLength);

  // 监听所有内容变更事件
  textarea.on('input', function() {
    const currentLength = $(this).val().length;
    // 核心判断：长度不够就禁用，够了就启用
    submitBtn.attr('disabled', currentLength < minLength);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea maxlength="20" minlength="5" rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

方案二：纯JavaScript实现 #

如果不想依赖jQuery，原生JS也能轻松搞定：

document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.querySelector('input[type="submit"]');
  const textarea = document.getElementById('texta');
  const minLength = parseInt(textarea.getAttribute('minlength'), 10);

  // 初始化按钮状态
  submitBtn.disabled = textarea.value.length < minLength;

  // 监听内容变更事件
  textarea.addEventListener('input', function() {
    const currentLength = this.value.length;
    submitBtn.disabled = currentLength < minLength;
  });
});

<textarea maxlength="20" minlength="5" rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

两种方案的核心逻辑一致：先获取最小长度要求，初始化按钮状态，再监听内容变化实时更新按钮的禁用状态，这样就能完美实现你的需求啦！

内容的提问来源于stack exchange，提问作者Dead Pool