2 Star 31 Fork 12

Layui 扩展库 / input Attr

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
example.html 4.04 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
黄俊杰 提交于 2021-08-19 01:34 . 2021年8月19日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="./css/example.css" />
<script src="./libs/layui/layui.js"></script>
<link rel="stylesheet" href="./libs/layui/css/layui.css" />
<title>inputAttr - 更多属性的输入框</title>
</head>
<body>
<div class="board">
<h1 class="title">效果展示</h1>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-form-label">带删除按钮</div>
<div class="layui-input-block">
<!-- 添加 clearable 属性, 赋予输入框删除内容的能力, 仅对 input 标签生效-->
<input type="text" placeholder="输入点东西看看" value="作者真给力!" class="layui-input" clearable />
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">字数统计</div>
<div class="layui-input-block">
<!-- 添加 show-word-limit 属性, 赋予输入框统计字数+限制字数的能力-->
<!-- input 和 textarea 都可用! 设置 show-word-limit 必须要设置 maxlength -->
<input type="text" placeholder="输入点东西看看" value="酷啊! Nice!" maxlength="20" class="layui-input" show-word-limit />
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">字数统计</div>
<div class="layui-input-block">
<!-- 不废话了, 同理-->
<textarea rows="3" class="layui-textarea" placeholder="输入点东西看看" maxlength="500" show-word-limit>亲亲抱抱举高高 (づ ̄3 ̄)づ╭❤~</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">约束范围</div>
<div class="layui-input-block">
<!-- 额外设置了匹配规则: matchRule: "input,textarea[maxlength]" -->
<!-- 因为这个标签不符合这个规则, 所以不会渲染 -->
<textarea rows="3" class="layui-textarea" placeholder="输入点东西看看" show-word-limit>额外设置了匹配规则: matchRule: "input,textarea[maxlength]",因为这个标签不符合这个规则, 所以不会渲染</textarea>
</div>
</div>
</div>
</div>
<script>
layui
.config({
base: "./libs/layui_exts/",
})
.extend({
inputAttr: "inputAttr/js/index",
});
layui.use(["inputAttr"], function () {
var inputAttr = layui.inputAttr;
// 最简单的调用方式, 你啥参数都不要传递
// 初始化一下就好了
// 如果你铁了心要加参数也无妨, 去啃文档吧, 几分钟的事情...
inputAttr.render({
// 重新定义根节点
root: ".layui-form",
// 1.0.1.20210818 新增, 匹配规则
// 默认是 input,textarea, 写法就是 jquery 的写法
matchRule: "input,textarea[maxlength]",
// 事件托管
event: {
// 当点击清除按钮内容被清理
clearable: function (event, dom) {
console.log({ event: event, dom: dom });
},
},
});
});
</script>
</body>
</html>

评论 ( 0 )

你可以在登录后,发表评论

1
https://gitee.com/layui-exts/input-attr.git
git@gitee.com:layui-exts/input-attr.git
layui-exts
input-attr
input Attr
master

搜索帮助