keyWord.js 标签输入框插件依赖aspect.js,使用空格分隔-BFW插件库

keyWord.js 标签输入框插件依赖aspect.js,使用空格分隔

第一步引入bfwone 加载依赖项jquery aspect

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|aspect&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["keyWord", "keyWord"], function() {
                var keyWord = $("#wordInput").keyWord({
                    panel: '#wordTags',
                    value: '#wordHiddenInput',
                    max: 3,
                    tips: '最多只能输入3项'
                });

                keyWord.init('php,php,java,前端开发')
            });
        });
    </script>
    	<style>
		.block {
			display:flex;
			flex-direction:row;
			align-items:center;
			width:500px;
			height:30px;
			border:1px solid #ddd;
			padding:10px;
			margin:100px auto 0;
		}
		#wordTags {
			display:flex;
			flex-wrap:nowrap;
		}
		input{
			width:100%;
			height:20px;
			border:none;
		}
	</style>

</head>
<body>
    <div class="block">
        <div id="wordTags"></div>
        <input id="wordInput" type="text" name="" placeholder="请输入关键词以空格结尾">
        <input id="wordHiddenInput" type="hidden" name="">
    </div>


</body>
</html>