input-attr
/
example.html

<!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>