插件 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');
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了