阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 BootStrap Maxlength 中文API文档

      插件 BootStrap Maxlength 中文API文档

      源码 & 下载

      此插件默认使用徽章集成Twitter引导程序,以显示用户插入文本的字段的最大长度。这个插件使用HTML5属性“maxlength”来工作。

      指示标记显示在聚焦元素上,并在焦点丢失时消失。

      可配置的选项

      • alwaysShow:如果为true,则将忽略阈值,并且在输入时或在输入上聚焦时,将始终显示剩余长度指示。默认值:false。
      • 阈值:这是一个数字,表示开始显示指示的剩余字符数。默认值:10。
      • warningClass:它是带指示符的元素的类。默认情况下,引导程序是“label label-success”,但可以更改为您想要的任何内容。
      • limitReachedClass:它是达到限制时元素获得的类。默认为“label label-important label-danger”(支持Bootstrap 2和3)。
      • separator:表示键入的字符数和可用字符总数之间的分隔符。默认为“/”。
      • preText:是一串文本,可以在指标前输出。默认情况下,preText为空。
      • postText:是指标后输出的字符串。postText默认为空。
      • showMaxLength:如果为false,将仅显示键入字符的数量,例如,不显示最大长度。默认值:true。
      • showCharsTyped:如果为false,将仅显示剩余长度,例如将显示剩余长度而不是键入字符数。默认值:true。
      • placement:是一个字符串,定义输出计数器的位置。可能的值包括:底部(默认选项),左侧,顶部,右侧,右下角,右上角,左上角,左下角和居中右侧。
      • appendToParent:将maxlength指示符标记附加到输入的父级而不是正文。
      • 消息:提供消息文本的另一种方法,即“您已键入%charsTyped%chars,%charsRemaining%of%charsTotal%remaining”。%charsTyped%,%charsRemaining%和%charsTotal%将替换为实际值。这会覆盖选项分隔符,preText,postText和showMaxLength。或者,您可以提供当前文本和最大长度的函数,并返回要显示的字符串。例如,function(currentText,maxLength){return''+ Math.ceil(currentText.length / 160)+‘SMS Message(s)'; }
      • utf8:如果为true,则输入将使用utf8 bytesize / encoding进行计数。例如:‘£'字符计为两个字符。
      • showOnReady:将徽章添加到页面后立即显示,类似于alwaysShow
      • twoCharLinebreak:将linebreak计为2个字符以匹配IE / Chrome textarea验证。
      • customMaxAttribute:String - 允许自定义属性显示指示符而不触发本机maxlength行为。如果值大于本机maxlength属性,则忽略。超过时会添加’overmax’类以允许用户实现表单验证。
      • allowOverMax:允许输入超过customMaxLength。在最大软情况下很有用。
      • placement:是一个字符串,对象或函数,用于定义输出计数器的位置。
      • 可能的字符串值包括:bottom(默认选项),left,top,right,bottom-right,top-right,left-left,bottom-left和centered-right。也可用:右下角内侧(如Google的材质设计,右上角内部,左上角内侧和左下角内侧。
      • 自定义展示位置可以作为对象传递,其中键有顶部,右侧,底部,左侧和位置。这些传递给$ .fn.css。
      • 也可以传递自定义功能。使用{$ element} Current Input,{$ element} MaxLength指标和当前输入的位置{底部高度左上顶部宽度}调用此方法。

      活动

      • 输入元素上的maxlength.reposition触发重新放置其指标。如果textareas通过外部触发器调整大小,则很有用。
      • 显示指示符时触发maxlength.shown。
      • 从视图中删除指示符时会触发maxlength.hidden。

      例子

      基本实施:

      $('input[maxlength]').maxlength();
      

      更改阈值:

      $('input.className').maxlength({
          threshold: 20
      });
      

      一些可配置选项的示例:

      $('input.className').maxlength({
          alwaysShow: true,
          threshold: 10,
          warningClass: "label label-info",
          limitReachedClass: "label label-warning",
          placement: 'top',
          preText: 'used ',
          separator: ' of ',
          postText: ' chars.'
      });
      

      使用消息选项的相同示例:

      $('input.className').maxlength({
          alwaysShow: true,
          threshold: 10,
          warningClass: "label label-info",
          limitReachedClass: "label label-warning",
          placement: 'top',
          message: 'used %charsTyped% of %charsTotal% chars.'
      });
      

      允许用户输入超过最大字符的示例。注意:您不能在input元素上具有maxlength属性。您需要提供customMaxAttribute属性

      示例HTML元素:

      <textarea class="form-control" id="xyz" name="xyz" maxlength="10"></textarea>
      
      // Setup maxlength
      $('.form-control').maxlength({
      	alwaysShow: true,
      	validate: false,
      	allowOverMax: true,
          customMaxAttribute: "90"
      });
      
      // validate form before submit
      $('form').on('submit', function (e) {
      	$('.form-control').each(
      		function () {
      			if ($(this).hasClass('overmax')) {
      				alert('prevent submit here');
      				e.preventDefault();
      				return false;
      			}
      		}
      	);
      });
      

      maxlength.reposition每当外部自动调整大小插件调整textarea大小时触发事件的示例:

      $('textarea').on('autosize:resized', function() {
          $(this).trigger('maxlength.reposition');
      });
      
      目录
      目录