5 Star 57 Fork 25

cshaptx4869 / inputTag

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

InputTag 组件

简介

InputTag 组件。按回车键(Enter)生成标签!按回退键(Backspace)删除标签!

效果

在线演示

示例

JQuery 方式引入

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery标签输入框</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="./inputTag.css">
</head>
<body>
<div>
    <div class="fairy-tag-container">
        <input type="text" class="fairy-tag-input tag1" autocomplete="off" value="">
    </div>

    <div id="tag1"></div>

    <div class="fairy-tag-container">
        <input type="text" class="fairy-tag-input tag2" autocomplete="off" value="">
    </div>

    <div id="tag2"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- 引入js -->
<script src="./inputTag.js"></script>
<script>
    inputTag.render({
        elem: '.tag1',
        data: ['hello', 'world', 'tom', 'jerry'],//初始值
        permanentData: ['hello'],//不允许删除的值
        removeKeyNum: 8,//删除按键编号 默认,BackSpace 键
        createKeyNum: 13,//创建按键编号 默认,Enter 键
        beforeCreate: function (data, value) {//添加前操作,必须返回字符串才有效
            return val + '(XoX)';
        },
        onChange: function (data, value, type) {
            console.log(arguments);
            $('#tag1').text(JSON.stringify(data));
        }
    });

    inputTag.render({
        elem: '.tag2',
        data: ['你好', '世界', '汤姆', '杰瑞'],
        permanentData: ['世界'],
        onChange: function (data, value, type) {
            console.log(arguments);
            $('#tag2').text(JSON.stringify(data));
        }
    });
</script>
</body>
</html>

Layui 方式引入

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layui标签输入框</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="./inputTag.css">
</head>
<body>
<div>
    <div class="fairy-tag-container">
        <input type="text" class="fairy-tag-input tag1" autocomplete="off" value="">
    </div>

    <div id="tag1"></div>

    <div class="fairy-tag-container">
        <input type="text" class="fairy-tag-input tag2" autocomplete="off" value="">
    </div>

    <div id="tag2"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js" integrity="sha512-lH7rGfsFWwehkeyJYllBq73IsiR7RH2+wuOVjr06q8NKwHp5xVnkdSvUm8RNt31QCROqtPrjAAd1VuNH0ISxqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 引入js -->
<script>
    layui.config({
        base: './'
    }).use(['inputTag', 'jquery'], function () {
        var $ = layui.jquery, inputTag = layui.inputTag;

        inputTag.render({
            elem: '.tag1',
            data: ['hello', 'world', 'tom', 'jerry'],//初始值
            permanentData: ['hello'],//不允许删除的值
            removeKeyNum: 8,//删除按键编号 默认,BackSpace 键
            createKeyNum: 13,//创建按键编号 默认,Enter 键
            beforeCreate: function (data, value) {//添加前操作,必须返回字符串才有效
            	return val + '(XoX)';
        	},
            onChange: function (data, value, type) {
                console.log(arguments);
                $('#tag1').text(JSON.stringify(data));
            }
        });

        inputTag.render({
            elem: '.tag2',
            data: ['你好', '世界', '汤姆', '杰瑞'],
            permanentData: ['世界'],
            onChange: function (data, value, type) {
                console.log(arguments);
                $('#tag2').text(JSON.stringify(data));
            }
        });
    })
</script>
</body>
</html>

空文件

简介

标签输入组件。按回车键(Enter)生成标签!按回退键(Backspace)删除标签! 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/cshaptx4869/input-tag.git
git@gitee.com:cshaptx4869/input-tag.git
cshaptx4869
input-tag
inputTag
master

搜索帮助

14c37bed 8189591 565d56ea 8189591