<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Input文本框创建标签代码</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css">
<link rel="stylesheet" href="src/jquery.tagsinput-revisited.css" />
<style type="text/css">
.content {
width: 800px;
margin: 20px auto;
}
label {
display: block;
padding: 20px 0 5px 0;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="content">
<form id="form">
<label>基本的标签输入：</label>
<input id="form-tags-1" name="tags-1" type="text" value="carrot,potato,pizza">
<label>带回调函数的标签输入 (check console):</label>
<input id="form-tags-2" name="tags-2" type="text" value="apple,banana,pizza">
<label>带校验的标签输入：</label>
<input id="form-tags-3" name="tags-3" type="text" value="">
<label>带自动完成功能的标签输入：</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
<label>用分号分隔标签：</label>
<input id="form-tags-5" name="tags-5" type="text" value="more;pizza">
<label>Tags input with array of delimiters (comma and semicolon):</label>
<input id="form-tags-6" name="tags-6" type="text" value="more;pizza">
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="src/jquery.tagsinput-revisited.js"></script>
<script type="text/javascript">
$(function() {
$('#form-tags-1').tagsInput();
$('#form-tags-2').tagsInput({
'onAddTag': function(input, value) {
console.log('tag added', input, value);
},
'onRemoveTag': function(input, value) {
console.log('tag removed', input, value);
},
'onChange': function(input, value) {
console.log('change triggered', input, value);
}
});
$('#form-tags-3').tagsInput({
'unique': true,
'minChars': 2,
'maxChars': 10,
'limit': 5,
'validationPattern': new RegExp('^[a-zA-Z]+$')
});
$('#form-tags-4').tagsInput({
'autocomplete': {
source: [
'apple',
'banana',
'orange',
'pizza'
]
}
});
$('#form-tags-5').tagsInput({
'delimiter': ';'
});
$('#form-tags-6').tagsInput({
'delimiter': [',', ';']
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery Input文本框创建标签代码.zip
版权申诉
137 浏览量
2023-09-22
00:22:57
上传
评论
收藏 100KB ZIP 举报
jQuery Input文本框创建标签代码.zip （5个子文件） 
src 
jquery.tagsinput-revisited.js 10KB jquery.tagsinput-revisited.css 2KB js jquery-ui.min.js 232KB jquery.min.js 91KB
index.html 3KB资源评论
