源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js如何实现点击标签文字,文字在文本框出现

  • 时间:2022-07-21 00:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js如何实现点击标签文字,文字在文本框出现
js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大。 [b]第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失。[/b]
<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>
[b]效果图:[/b] [b][img]http://files.jb51.net/file_images/article/201508/20158593027615.png?20157593040[/img] [/b] [b]第二种方法:当点击“编程素材网”标签的时候,此标签就出现在了文本框里,再点击SQL标签后,“SQL”标签就会替换掉“编程素材网”标签出现在文本框中。[/b]
<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>
[b]效果图:[/b] [img]http://files.jb51.net/file_images/article/201508/20158591923944.png?20157591944[/img] 这里再为大家分享另一个Javascript的小技巧-----[b]JS实现点击文本框清除表单内部默认文字,[/b]有时大家在填写表单内容时,表单里会出现一些默认提示文字,我们又不想一个个删除,有什么办法可以实现快速清除?下面就是我为大家准备的小代码:
<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>
[b]效果图:[/b] [img]http://files.jb51.net/file_images/article/201508/20158591455640.png?2015759159[/img] 点击文本框之后 [img]http://files.jb51.net/file_images/article/201508/20158591549742.png?20157591627[/img] 以上就是本文的全部内容,希望对大家的学习有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部