2 Star 27 Fork 16

cshaptx4869 / inputTag

Create your Gitee Account
Explore and code with more than 8 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
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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>

Repository Comments ( 8 )

Sign in to post a comment

About

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

Releases

No release

inputTag

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