InputTag 标签输入框组件

InputTag 组件

简介

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

下载地址

GitHub
Gitee

效果

Video_20210729130431 00_00_00-00_00_30.gif

示例

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'],//不允许删除的值
        onChange: function (value) {
            console.log(value);
            $('#tag1').text(JSON.stringify(value));
        }
    });

    inputTag.render({
        elem: '.tag2',
        data: ['你好', '世界', '汤姆', '杰瑞'],
        permanentData: ['世界'],
        onChange: function (value) {
            console.log(value);
            $('#tag2').text(JSON.stringify(value));
        }
    });
</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'],//不允许删除的值
            onChange: function (value) {
                console.log(value);
                $('#tag1').text(JSON.stringify(value));
            }
        });

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

分情破爱始乱弃，流落天涯思别离。如花似玉负情意，影如白昼暗自迷。随风浮沉千叶落，行色匆匆鬓已稀。