在输入最小字符数之前禁用提交按钮

  • 源码大小:4.91KB
  • 所需积分:1积分
  • 源码编号:19JP-3672
  • 浏览次数:252次
  • 最后更新:2023年07月09日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

input_least是一个jQuery脚本,它会禁用表单提交按钮,直到在特定的文本字段中输入了最少的字符数。

类似于minlength属性,但更灵活。它还提供视觉反馈,指示输入了多少字符。

如何使用它:

1.添加最小的目标文本字段的CSS ID。

<textarea id="least">
  ...
</textarea>

2.在文本字段旁边创建一个字符计数器。

<p id="least_count">( 0 ) You must enter at least 30 characters.</p>

3.添加最小的提交按钮的CSS ID。

<button id="least_button" type="submit">
  Submit
</button>

4.在文档中加载最新的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5.指定最小字符数的主jQuery脚本。

$(document).ready(function(){ 
  const target = document.getElementById('least_button');
  target.disabled = true;
  $('#least').on('keyup', function() {
    $('#least_count').html("( "+$(this).val().length+" ) You must enter at least 30 characters.");
    if($(this).val().length >= 30) {
      target.disabled = false;
    }
    else{
      target.disabled = true;
    }
  });
});

预览截图