Layui 組件
簡介
inputTag 組件，回車自動生成標籤!
效果
示例
<!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>標籤輸入框</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css" integrity="sha512-gK5o6RvUyTWSY+nO4Q9kJKGXbffUbV+u/R3bOAnCiOSIGt8GNDkvLvsQC2WaxyIQwGS56zpwt1TajavwKXBwKA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js" integrity="sha512-lH7rGfsFWwehkeyJYllBq73IsiR7RH2+wuOVjr06q8NKwHp5xVnkdSvUm8RNt31QCROqtPrjAAd1VuNH0ISxqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="./inputTag.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-form-tag">
<input type="text" class="layui-form-input-tag tag1" placeholder="+ new tag" autocomplete="off" value="">
<div id="tag1"></div>
</div>
<div class="layui-form-tag">
<input type="text" class="layui-form-input-tag tag2" placeholder="+ new tag" autocomplete="off" value="">
<div id="tag2"></div>
</div>
</div>
<script>
layui.use(['inputTag', 'jquery'], function () {
var $ = layui.jquery, inputTag = layui.inputTag;
inputTag.render({
elem: '.tag1',
content: ['hello', 'world', 'tom', 'jerry'],//初始值
permanentContent: ['hello'],//不允許刪除的值
glue: ',',//content分隔符
change: function (value) {//實時獲取content值
console.log(value);
$('#tag1').text(JSON.stringify(value));
}
});
inputTag.render({
elem: '.tag2',
content: ['你好', '世界', '湯姆', '傑瑞'],
permanentContent: ['世界'],
glue: '|',
change: function (value) {
console.log(value);
$('#tag2').text(JSON.stringify(value));
}
});
})
</script>
</body>
</html>