15 Star 102 Fork 36

笔下光年 / Light Year Example

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
test_maxlength_v4.html 4.71 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>输入长度判断插件Bootstrap MaxLength - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
<style>
.bootstrap-maxlength {
padding-top: .2em;
line-height: 1.5;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><div class="card-title">输入长度判断插件 Bootstrap MaxLength</div></div>
<div class="card-body">
<div class="form-group">
<label for="defaultconfig">默认</label>
<p class="text-muted">默认当剩余字符小于等于10时,提示将显示:</p>
<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig">
</div>
<div class="form-group">
<label for="thresholdconfig">阈值</label>
<p class="text-muted">使用<code>threshold</code>选项表示还有多少字符可以开始显示指示。</p>
<input type="text" maxlength="25" name="thresholdconfig" class="form-control" id="thresholdconfig">
</div>
<div class="form-group">
<label for="placement">位置</label>
<p class="text-muted">您所需要做的就是用其中一个字符串指定<code>placement</code>选项。如果未指定,则将被定位到“底部”。</p>
<input type="text" class="form-control" maxlength="25" name="placement" id="placement">
</div>
<div class="form-group">
<label for="alloptions">始终显示</label>
<p class="text-muted mb-3 font-13">如果<code>alwaysShow</code>为true,则将忽略阈值,其余长度指示将始终在输入或获取焦点时显示。默认值:false。</p>
<input type="text" class="form-control" maxlength="25" name="alloptions" id="alloptions">
</div>
<div class="form-group">
<label for="mb-2">文本域</label>
<p class="textarea">Bootstrap maxlength 支持文本区域和输入。即使在旧的IE上。</p>
<textarea id="textarea" class="form-control" maxlength="225" rows="3" placeholder="此文本区域限制为225个字符。"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 默认使用
$("input#defaultconfig").maxlength({
warningClass: "badge badge-info",
limitReachedClass: "badge badge-warning"
});
// 设置阈值
$("input#thresholdconfig").maxlength({
threshold: 20,
warningClass: "badge badge-info",
limitReachedClass: "badge badge-warning"
});
// 设置提示显示的位置
$("input#placement").maxlength({
// 可使用的值有: bottom, left, top, right, bottom-right, top-right, top-left, bottom-left 和 centered-right。
// 你也可以使用 : bottom-right-inside, top-right-inside, top-left-inside and bottom-left-inside.
alwaysShow: true,
placement: "bottom-right-inside",
warningClass: "badge badge-info",
limitReachedClass: "badge badge-warning"
})
// 始终显示
$("input#alloptions").maxlength({
alwaysShow: true,
warningClass: "badge badge-success",
limitReachedClass: "badge badge-danger",
separator: " 个字符; ",
preText: "已输入 ",
postText: " 个可用字符。",
validate: !0
});
// 文本域使用
$("textarea#textarea").maxlength({
threshold: 255,
warningClass: "badge badge-info",
limitReachedClass: "badge badge-warning"
});
});
</script>
</body>
</html>
HTML
1
https://gitee.com/yinqi/Light-Year-Example.git
git@gitee.com:yinqi/Light-Year-Example.git
yinqi
Light-Year-Example
Light Year Example
master

搜索帮助

14c37bed 8189591 565d56ea 8189591