您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 滚动代码 >

    JavaScript实现input输入框点击获取文字内容

    时间:2014-04-09 08:49 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验。
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>input输入框获取js点击文字内容</title>
      <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>
      </html>
    JavaScript实现input输入框点击获取文字内容由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/gundong/7060.html
    标签:网站源码