jQuery点击链接插入文本框源码实例

下面一段代码实例，当点击链接的时候能够将链接的相关信息插入大文本框中，可能在实际编码中很少有这种用法，不顾还是希望浏览者能够从中获取或多或少有用的信息，代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" />
<title>点击链接插入链接信息-51前端</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var textareaContain = $("#textContain textarea").eq(0); 
  //单击插入链接 
  $("#clickContain a").click(function(){ 
    if(!$(this).hasClass('lock')){ 
      var p=eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>/i'); 
      var addString = $(this).parent().html().match(p); //正则提取<a>标签 
      if(!!addString) addString=addString[0]+'\\n'; //正则匹配后的[0]是全部匹配的值，加入换行\\n 
      textareaContain.val(textareaContain.val()+addString); 
      $(this).addClass('lock'); //阻止第二次点击 
    } 
    return false; 
  })
  //双击删除链接 
  $("#clickContain a").dblclick(function(){ 
    $(this).attr('class',null); //删除整个class属性，以免出现class="" 
    var p = eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>(\\\\n*)/gi'); 
    textareaContain.val(textareaContain.val().replace(p,'')); 
    return false; 
  })
}); 
</script> 
</head> 
<body> 
<div id="clickContain"> 
  <a href="http://www.softwhy.com">51前端</a> 
  <a href="http://www.163.com">网易</a> 
  <a href="http://www.qq.com">腾讯</a> 
  <a href="http://www.sina.com.cn">新浪</a> 
</div> 
<div id="textContain"> 
  <textarea rows="10" cols="50"></textarea> 
</div> 
</body> 
</html>

代码描述：jQuery点击链接插入文本框。jQuery点击链接插入文本框源码实例

下载全部收藏

121 161

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册