js如何实现点击标签文字,文字在文本框出现
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了js如何实现点击标签文字,文字在文本框出现,感兴趣的小伙伴们可以参考下
js实现点击标签文字,文字出现在文本框里,狼蚁网站SEO优化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>
效果图
第二种方法当点击“狼蚁SEO”标签的时候,此标签就出现在了文本框里,再点击SQL标签后,“SQL”标签就会替换掉“狼蚁SEO”标签出现在文本框中。
<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">狼蚁SEO</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实现点击文本框清除表单内部默认文字,有时大家在填写表单内容时,表单里会出现一些默认提示文字,我们又不想一个个删除,有什么办法可以实现快速清除?狼蚁网站SEO优化就是我为大家准备的小代码
<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>
效果图
点击文本框之后
以上就是本文的全部内容,希望对大家的学习有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程