js實現點擊標簽文字,文字出現在文本框裡,下面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>
效果圖:
第二種方法:當點擊“”標簽的時候,此標簽就出現在了文本框裡,再點擊SQL標簽後,“SQL”標簽就會替換掉“”標簽出現在文本框中。
<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實現點擊文本框清除表單內部默認文字,有時大家在填寫表單內容時,表單裡會出現一些默認提示文字,我們又不想一個個刪除,有什麼辦法可以實現快速清除?下面就是我為大家准備的小代碼:
<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="請輸入的關鍵詞"> <input type="submit" name="Submit" value="提交" onFocus="if(so_box.so_name.value==so_box.so_name.defaultValue){so_box.so_name.value='';}"> </form>
效果圖:
點擊文本框之後
以上就是本文的全部內容,希望對大家的學習有所幫助。