快捷導(dǎo)航

js如何實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字，文字在文本框出現(xiàn)

更新時(shí)間：2015年08月05日 09:37:36 投稿：lijiao

這篇文章主要介紹了js如何實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字，文字在文本框出現(xiàn),感興趣的小伙伴們可以參考下

js實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字，文字出現(xiàn)在文本框里，下面2種方法實(shí)現(xiàn)的功能略有不同，總體來說方法一功能更強(qiáng)大。

第一種方法：隨意點(diǎn)擊任何標(biāo)簽都會(huì)出現(xiàn)在文本框中，如何第二次點(diǎn)擊標(biāo)簽，對(duì)應(yīng)的文字就會(huì)在文本框中消失。

<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">市級(jí),</div><div class="c" id="c1">省級(jí),</div><div class="c" id="c2">國家級(jí)
<script>
var x=["市級(jí)","省級(jí)","國家級(jí)"];
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>

效果圖：

第二種方法：當(dāng)點(diǎn)擊“腳本之家”標(biāo)簽的時(shí)候，此標(biāo)簽就出現(xiàn)在了文本框里，再點(diǎn)擊SQL標(biāo)簽后，“SQL”標(biāo)簽就會(huì)替換掉“腳本之家”標(biāo)簽出現(xiàn)在文本框中。

<style>.label {cursor:pointer}</style>

<input type="text" id="textbox" size = "30" name="chaxinmd" />
<span class="label">JS特效</span>
<span class="label">C++</span>
<span class="label">SQL</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>

效果圖：

這里再為大家分享另一個(gè)Javascript的小技巧-----JS實(shí)現(xiàn)點(diǎn)擊文本框清除表單內(nèi)部默認(rèn)文字，有時(shí)大家在填寫表單內(nèi)容時(shí)，表單里會(huì)出現(xiàn)一些默認(rèn)提示文字，我們又不想一個(gè)個(gè)刪除，有什么辦法可以實(shí)現(xiàn)快速清除？下面就是我為大家準(zhǔn)備的小代碼：

<form action="" method="get" name="so_box" id="so_box">

<input name="so_name" type="text" id="so_name" onFocus="if(value==defaultValue){value='';}"
onBlur="if(!value){value=defaultValue;}"
value="請(qǐng)輸入的關(guān)鍵詞">

<input type="submit" name="Submit" value="提交" onFocus="if(so_box.so_name.value==so_box.so_name.defaultValue){so_box.so_name.value='';}">

</form>

效果圖：