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>
效果图:
点击文本框之后
以上就是本文的全部内容,希望对大家的学习有所帮助。
本文向大家介绍js实现鼠标点击文本框自动选中内容的方法,包括了js实现鼠标点击文本框自动选中内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现鼠标点击文本框自动选中内容的方法。分享给大家供大家参考。具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再
我如何用材料组件做到这一点? 我不想在边框之间有这样的标签:(当你有多个填充字段时,这看起来不再好看了,在我看来,所有中断的边框都很紧张)
本文向大家介绍js实现点击按钮复制文本功能,包括了js实现点击按钮复制文本功能的使用技巧和注意事项,需要的朋友参考一下 最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一、原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 如果是输入框,可以通过 selec
本文向大家介绍JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转,包括了JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转的使用技巧和注意事项,需要的朋友参考一下 程序要求: 编写一个html文件的网页代码,页面包含一个下拉列表框、一个文本框和一个按钮,下拉列表框选择要去的网站,当选择完毕后文本框中出现对应的网址。点击确认跳转按钮后访问文本框中出现的网址。 实现效果:
本文向大家介绍js实现点击切换TAB标签实例,包括了js实现点击切换TAB标签实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。 先来看看运行效果截图: 在线演示地址
本文向大家介绍js实现仿Discuz文本框弹出层效果,包括了js实现仿Discuz文本框弹出层效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现仿Discuz文本框弹出层效果。分享给大家供大家参考。具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字、图片、表单无素的DIV层