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

 更新时间:2015年08月05日 09:37:36   投稿:lijiao  
这篇文章主要介绍了js如何实现点击标签文字,文字在文本框出现,感兴趣的小伙伴们可以参考下

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>

效果图:

点击文本框之后

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • webpack proxy如何解决跨域问题

    webpack proxy如何解决跨域问题

    webpack proxy,即webpack提供的代理服务,基本行为就是接收客户端发送的请求后转发给其他服务器,本文给大家介绍了webpack proxy如何解决跨域问题,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解

    这篇文章主要介绍了微信小程序学习笔记之文件上传、下载操作,结合实例形式分析了微信小程序图片文件传输的原理、步骤及后台php操作相关实现技巧,并结合图文形式予以详细说明,需要的朋友可以参考下
    2019-03-03
  • js将table的每个td的内容自动赋值给其title属性的方法

    js将table的每个td的内容自动赋值给其title属性的方法

    下面小编就为大家带来一篇js将table的每个td的内容自动赋值给其title属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 简单实现js倒计时功能

    简单实现js倒计时功能

    这篇文章主要为大家详细介绍了js倒计时效果的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 理解Javascript_03_javascript全局观

    理解Javascript_03_javascript全局观

    今天让我们站在语言的高度来看一下Javascript都有点什么。因为是全局性的俯瞰,所以不针对细节作详细的讲解。
    2010-10-10
  • wow.js实现炫酷的页面滚动伴随动画示例详解

    wow.js实现炫酷的页面滚动伴随动画示例详解

    这篇文章主要为大家介绍了wow.js实现炫酷的页面滚动伴随动画示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • js动态删除div元素基本思路及实现代码

    js动态删除div元素基本思路及实现代码

    这篇文章主要介绍了js动态删除div元素基本思路及实现代码,需要的朋友可以参考下
    2014-05-05
  • echarts柱状图坐标轴内容显示不全的两种解决办法

    echarts柱状图坐标轴内容显示不全的两种解决办法

    本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 详解Nuxt.js 实战集锦

    详解Nuxt.js 实战集锦

    这篇文章主要介绍了Nuxt.js 实战集锦,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JS实现自定义简单网页软键盘效果代码

    JS实现自定义简单网页软键盘效果代码

    这篇文章主要介绍了JS实现自定义简单网页软键盘效果代码,可实现简单模拟键盘布局及响应鼠标点击按下键盘按键功能,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论