如何在页面中选中一定数量文字触发事件进行分享、转发?

我在网易博客看到这么一个类似的功能,选中文本后如果字数达到10个以上,就会显示转发微博的功能(如果能兼容按住shift + 方向键也触发就更好),这是如何实现的?

需要考虑兼容不同的浏览器。效果如图:
请输入图片描述

zhupp
zhupp
963
编辑于2012-03-02
评论 (0)链接2012-03-02 
  
<html>
<head>
<title>无标题文档</title>
<script type="text/javascript">
function share(){
var text = '';
if(navigator.appName=="Microsoft Internet Explorer"){
text=document.selection.createRange().text;
}else{
text=window.getSelection();
}
var len= get_length(""+text+"");
if(len>10) {
//显示分享button
}
}

function get_length(str) {
var sum = 0;
for (var i = 0; i < str.length; i++) {
if ((str.charCodeAt(i) >= 0) && (str.charCodeAt(i) <= 255))
sum = sum + 0.5;
else
sum = sum + 1;
}
return parseInt(sum);
}
</script>
</head>
<body>
<span id="ss" onMouseUp="share()">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</span>
</body>
</html>
zhupp
编辑于 2012-03-02
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (2)链接 • 2012-03-02
  • 0 支持
    如果能加上 按住shift + 方向键,松开shift时触发getWords()函数就更好了。 – 冯义军 2012-03-02
  • 0 支持
    放文字的那块是text还是div,我刚才试了一下如果不是text貌似没法监听onkueup事件 – zhupp 2012-03-02

方法与代码

选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare,当然,您不喜欢可以换掉,甚至不要,此方法完整代码如下:

  
var $sinaMiniBlogShare = function(eleShare, eleContainer) {
var eleTitle = document.getElementsByTagName("title")[0];
eleContainer = eleContainer || document;
var funGetSelectTxt = function() {
var txt = "";
if(document.selection) {
txt = document.selection.createRange().text; // IE
} else {
txt = document.getSelection();
}
return txt.toString();
};
eleContainer.onmouseup = function(e) {
e = e || window.event;
var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if (txt) {
eleShare.style.display = "inline";
eleShare.style.left = left + "px";
eleShare.style.top = top + "px";
} else {
eleShare.style.display = "none";
}
};
eleShare.onclick = function() {
var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
if (txt) {
window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);
}
};
};

可以看到$sinaMiniBlogShare方法有两个参数,eleShare和eleContainer,其中,前一个参数是必须的,指的是文字选中后出现的浮动层元素(在本文demo中就是新浪眼睛图标);后面一个参数指文字选择的容器元素,可选参数,如果不设置则指document元素,也就是整个页面文字选中都会触发分享的功能。

假设新浪微博分享图标的HTML如下:

  
<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

则直接:
$sinaMiniBlogShare(document.getElementById("imgSinaShare"));

就实现了选中文字分享到新浪微博的功能了。

详见:http://www.zhangxinxu.com/wordpress/?p=1428

冯义军
冯义军
14.03K
编辑于 2012-03-02
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-02
德问是一个专业的编程问答社区,请 登录注册 后再提交答案