js如何實現(xiàn)點擊標簽文字，文字在文本框出現(xiàn)
更新時間：2015年08月05日 09:37:36 投稿：lijiao
這篇文章主要介紹了js如何實現(xiàn)點擊標簽文字，文字在文本框出現(xiàn),感興趣的小伙伴們可以參考下
js實現(xiàn)點擊標簽文字，文字出現(xiàn)在文本框里，下面2種方法實現(xiàn)的功能略有不同，總體來說方法一功能更強大。
第一種方法：隨意點擊任何標簽都會出現(xiàn)在文本框中，如何第二次點擊標簽，對應(yīng)的文字就會在文本框中消失。
<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>
效果圖：
第二種方法：當點擊“腳本之家”標簽的時候，此標簽就出現(xiàn)在了文本框里，再點擊SQL標簽后，“SQL”標簽就會替換掉“腳本之家”標簽出現(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>
效果圖：
這里再為大家分享另一個Javascript的小技巧-----JS實現(xiàn)點擊文本框清除表單內(nèi)部默認文字，有時大家在填寫表單內(nèi)容時，表單里會出現(xiàn)一些默認提示文字，我們又不想一個個刪除，有什么辦法可以實現(xià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="請輸入的關(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>
效果圖：
點擊文本框之后
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了微信小程序自定義單選框樣式實現(xiàn)單選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了純js實現(xiàn)web端錄音與播放功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
JavaScript實現(xiàn)圖片預(yù)加載的方法總結(jié)
在Web前端開發(fā)中,圖片是網(wǎng)頁內(nèi)容的重要組成部分,但它們的加載時間往往會影響頁面的整體性能,為了提升用戶體驗,減少等待時間,開發(fā)者通常會采用圖片預(yù)加載（Image Preloading）技術(shù),本文給大家介紹了JavaScript實現(xiàn)圖片預(yù)加載的方法總結(jié),需要的朋友可以參考下2024-12-12
本文主要介紹了JavaScript本地存儲實現(xiàn)用戶名存儲案例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
動態(tài)調(diào)整textarea中字體的大小代碼
用js批量輸出select事件控制textarea中字體的大小的代碼。2009-12-12
Bootstrap文件上傳組件之bootstrap fileinput
這篇文章主要介紹了Bootstrap文件上傳組件之bootstrap fileinput,重點是把界面做得更加友好，更好的增加用戶體驗。還有還多注意細節(jié)大家可以通過本文詳細了解下2016-11-11
Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報404錯notfound的解
這篇文章主要介紹了 Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報404錯notfound的解決方法,需要的朋友可以參考下2017-01-01
透明漸變導航是一種解決滾動條通頂?shù)淖兺ǚ桨?。這篇文章主要介紹了原生JS實現(xiàn) MUI導航欄透明漸變效果,需要的朋友可以參考下2017-11-11
最近公司的項目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于echart在微信小程序的使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02