如何实现点击标签文字，文字出现在文本框里？
就像发布博客的日志时，选择相应的标签那样。是用的js实现的吗？我用的网页语言是asp。想实现的是可以添加多个标签实现了添加不同标签，但离想要的效果还差一步，再如何改一下，...
就像发布博客的日志时，选择相应的标签那样。是用的js实现的吗？我用的网页语言是asp。
想实现的是可以添加多个标签
实现了添加不同标签，但离想要的效果还差一步，再如何改一下，以便于可以选择不同标签的同时，文本框内原有标签不变，继续往后接着显示。（两个标签之前还要加一个空格）
高手，有一个小bug，能解决一下就你了。两次连续点击同一个标签的话，在文本框里不应该往下排，而应该第二次点击时消失，第三次点击出来，第四次点击又消失这样子。并且“标签1”“标签2”“标签3”“标签4”哪个被选中了，哪个就有蓝色背景。如果你有QQ号，打开http://shuqian.qq.com，然后使用一下，就看到我描述的这个效果了。想要的其实就是和这个一样的效果。 展开
想实现的是可以添加多个标签
实现了添加不同标签，但离想要的效果还差一步，再如何改一下，以便于可以选择不同标签的同时，文本框内原有标签不变，继续往后接着显示。（两个标签之前还要加一个空格）
高手，有一个小bug，能解决一下就你了。两次连续点击同一个标签的话，在文本框里不应该往下排，而应该第二次点击时消失，第三次点击出来，第四次点击又消失这样子。并且“标签1”“标签2”“标签3”“标签4”哪个被选中了，哪个就有蓝色背景。如果你有QQ号，打开http://shuqian.qq.com，然后使用一下，就看到我描述的这个效果了。想要的其实就是和这个一样的效果。 展开
3个回答
展开全部
实现点击标签文字，文字出现在文本框里，下面2种方法实现的功能略有不同，总体来说方法一功能更强大。
方法一：
<style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style>
<input id="i" type="text" ><div class="c" id="c0">市级,</div><div class="c" id="c1">省级,</div><div class="c" id="c2">国家级
<script>
var x=["市级","省级","国家级"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){$("c"+i).onclick=(function(i){return function(){
var s=y.join(",").indexOf(x[i]);if(s>=0){
for(var r in y){if(y[r]==x[i]){y.splice(r,1)}}}
else{y.push(x[i])}$("i").value=y.join(" ");}})(i)}
</script>
方法二：
<style>.label {cursor:pointer}</style>
<input type="text" id="textbox" size = "30" name="chaxinmd" />
<span class="label">立项</span>
<span class="label">鉴定</span>
<span class="label">报奖</span>
<span class="label">其他</span>
<script type="text/javascript">
spans=document.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="label")
{ spans[i].onclick=function()
{ document.getElementById('textbox').value=this.innerHTML;
}}}
</script>
方法一：
<style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style>
<input id="i" type="text" ><div class="c" id="c0">市级,</div><div class="c" id="c1">省级,</div><div class="c" id="c2">国家级
<script>
var x=["市级","省级","国家级"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){$("c"+i).onclick=(function(i){return function(){
var s=y.join(",").indexOf(x[i]);if(s>=0){
for(var r in y){if(y[r]==x[i]){y.splice(r,1)}}}
else{y.push(x[i])}$("i").value=y.join(" ");}})(i)}
</script>
方法二：
<style>.label {cursor:pointer}</style>
<input type="text" id="textbox" size = "30" name="chaxinmd" />
<span class="label">立项</span>
<span class="label">鉴定</span>
<span class="label">报奖</span>
<span class="label">其他</span>
<script type="text/javascript">
spans=document.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="label")
{ spans[i].onclick=function()
{ document.getElementById('textbox').value=this.innerHTML;
}}}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<body>
<input type="text" id="textbox" />
<a id="label" href="javascript:setLabel()">标签</a>
</body>
<script type="text/javascript">
function setLabel(){
document.getElementById('textbox').value=document.getElementById('label').innerHTML;
}
</script>
</html>
<body>
<input type="text" id="textbox" />
<a id="label" href="javascript:setLabel()">标签</a>
</body>
<script type="text/javascript">
function setLabel(){
document.getElementById('textbox').value=document.getElementById('label').innerHTML;
}
</script>
</html>
更多追问追答
追问
如果想添加多个标签的话，应该怎么把上面这个代码改改
如果想添加多个标签的话，应该怎么把上面这个代码改改
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
建议截图，是不是文本框太短？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
