Back to home
JavaScript实现input输入框点击获取文字内容
2014-04-11 08:44:18 -0400
代码说明
Js实现INPUT输入框，当鼠标点击文字时自动获取文字内容，并显示在文本框中，一个惯用的表单技巧，有时可省去一些用户输入的麻烦，可有效提升用户体验。转自源码爱好者
HTML代码
<style> .c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:5px; float:left; font-size:12px; cursor:pointer} .show{ width:800px; height:auto; margin:0 auto;} </style> </head> <body> <div class="show"> <div class="c" id="c0">菜单导航</div> <div class="c" id="c1">时间日期</div> <div class="c" id="c2">焦点图</div> <div class="c" id="c3">tab标签</div> <div class="c" id="c4">jquery特效</div> <div class="c" id="c5">在线客服</div> <input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/> </div> <script> var x=["菜单导航","时间日期","焦点图","tab标签","jquery特效","在线客服"]; 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> </body>
代码演示
菜单导航
时间日期
焦点图
tab标签
jquery特效
在线客服
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N