设置文本字段 最大字符数 remainingchars

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

简介

一个小巧快速的jQuery插件,允许web开发人员限制文本字段的长度,并显示剩余字符,以防止用户提交需要比字段中输入的字符更多字符的表单。

参见:

如何使用它:

1.在jQuery之后加载jQuery remainingchars插件的缩小版。

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

2.使用数据最大值属性该插件支持任何文本字段,如文本区域输入.

<!-- Textarea -->
<textarea id="textarea" class="remchars" data-maxlen="140"></textarea>

<!-- Input Field -->
<input class="remchars" data-maxlen="14" />

3.调用文本字段上的函数,插件将完成其余操作。

(function() {
  $('.remchars').remainingChars();
})();

4.确定是否阻止用户在达到限制时键入字符。

<!-- Textarea -->
<textarea id="textarea" class="remchars" data-maxlen="140" data-limitinput="true"></textarea>

<!-- Input Field -->
<input class="remchars" data-maxlen="14" data-limitinput="true" />
// OR via JavaScript
(function() {
  $('.remchars').remainingChars({
    limitinput: true,
  });
})();

5.自定义要在状态区域中显示的文本。请注意,statustext字符串必须包含%d用于替换为剩余字符数:

(function() {
  $('.remchars').remainingChars({
    statustext: 'Remaining: %d'
  });
})();

6.将您自己的样式应用于错误文本:

.error {
  color: #f00;
}

预览截图