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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
Python装饰器知识点补充
2018/05/28 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Mac安装python3的方法步骤
2019/08/09 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
加强作风建设演讲稿
2014/10/24 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
大学军训心得体会800字
2016/01/11 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android