一个小巧快速的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; }