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


Posted in Javascript onAugust 05, 2015

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>

效果图:

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

第二种方法:当点击“三水点靠木”标签的时候,此标签就出现在了文本框里,再点击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>

效果图:

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

这里再为大家分享另一个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如何实现点击标签文字,文字在文本框出现

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

Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
在node中如何使用 ES6
Apr 22 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 #Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 #Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 #Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 #Javascript
基于js实现投票的实例代码
Aug 04 #Javascript
JavaScript数组对象赋值用法实例
Aug 04 #Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
python字符串替换示例
2014/04/24 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
PyQt5实现简易电子词典
2019/06/25 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
参赛口号
2014/06/16 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
vue实现锚点定位功能
2021/06/29 Vue.js
python中mongodb包操作数据库
2022/04/19 Python