5 Star 57 Fork 25

cshaptx4869 / inputTag

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
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>

Empty file

About

标签输入组件。按回车键(Enter)生成标签!按回退键(Backspace)删除标签! expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/cshaptx4869/input-tag.git
git@gitee.com:cshaptx4869/input-tag.git
cshaptx4869
input-tag
inputTag
master

Search

53164aa7 5694891 3bd8fe86 5694891