怎么做类似csdn这种标签输入效果

sibweo0916 2015-01-09 02:15:57

如题？

...全文

159 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

Braska 2015-01-09

打赏
举报

<html>
<head>
    <title>Index</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script> 
	<style>
		.tagPanel{position:relative;}
		.tagSpan{position: absolute;z-index: 101;float: left;top: 1px;}
		.tagPanel .tagSpan span{cursor: default;display: inline-block;border: solid 1px #ccc;background-color: #ffffcc;border-radius: 5px;padding: 2px 4px;margin-right: 4px;}
		.tagPanel input{padding-left:3px;outline:none;}
	</style>
</head>
<body>
<div id="tagPanel" class="tagPanel" style="border:1px gray solid; height:25px width:200px;">
<div class="tagSpan">
</div>
<input type="text" style="border:0; width:100%;height:25px;" id="tag"/>
</div>
</body>
<script>
$(function () {
	$("#tag").blur(function(){
		var val = $(this).val();
		if(val){
			$("<span>"+val+"</span>").appendTo($(".tagSpan"));
			resizeInput();
			$(this).val("");
		}
	}).keyup(function(evt){
		if(evt.which == 8){
			$(".tagPanel span:last").remove();
			resizeInput();
		}
	});
	
	$(".tagPanel span").live("click",function(){
		var $spans = $(this).remove();
		resizeInput();
	});
});

function resizeInput(){
	var panelWidth = $("#tagPanel").css("width");
	panelWidth = panelWidth.substring(0, panelWidth.length-2);
	var tagWidth = $(".tagSpan").css("width");
	vtagWidth = tagWidth.substring(0, tagWidth.length-2);
	var inputWidth = panelWidth - tagWidth;
	$('#tag').css({"width":inputWidth,"marginLeft":tagWidth});
}
</script>
</html>