jQuery自定义标签代码实例
分类：实例代码
分享一段代码实例，它实现了自定义标签的功能。
在文本框输入内容，然后点击回车就会自动生成一个标签。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body {
background: #fff !important;
font-family: microsoft yahei,arial;
color: #555;
}
.form_control {
margin: 40px;
width: 600px;
border: 1px solid #ccc;
padding: 5px;
overflow: hidden;
}
.token {
display: inline-block;
border: 1px solid #d9d9d9;
background-color: #ededed;
padding: 2px;
margin-right: 4px;
}
.close {
padding-left: 5px;
font-size: 16px;
line-height: 20px;
color: #666;
text-decoration: none;
opacity: 0.2;
}
.close:hover {
opacity: 0.8;
text-shadow: 0 1px 0 #fff;
font-size: 18px;
}
.token:hover {
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.token_input {
width: 220px;
height: 24px;
border: 0;
outline: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
$text = $(".token_input").val();
var $size = $(".token").size();
if (e && e.keyCode == 13 & $text != "") {
tag();
if ($size == 5) {
alert("最多输入5个标签");
}
};
};
//添加新标签函数
function tag() {
var $size = $(".token").size();
$input = $(".token_input");
if ($size < 5) {
var $text = $input.val();
var $val = "<div class='token'><span class='token_label'>"
+ $text + "</span><a href='javascript:void()' class='close'>x</a></div>"
$input.before($val);
$(".token_input").val("");
}
};
//关闭按钮；
$(".form_control").on('click', '.close', function bb() {
$(this).parent().remove();
});
});
</script>
</head>
<body>
<div class="form_control">
<input class="token_input" placeholder="最多输入5个标签,按回车键确定">
</div>
</body>
</html>
jQuery自定义标签代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery自定义标签代码实例就介绍到这了。
jQuery自定义标签代码实例属于前端实例代码，有关更多实例代码大家可以查看。