使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题

 <!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.7.2.js"></script> 
</head> 
<body> 
<div id="content" style="background: grey"> 
乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注,也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计,再到iPhone5s的巅峰状态,但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 (原因受安卓大屏冲击的影响,果粉对大屏手机的欲望愈加的浓烈),但是收到广泛吐槽也是最多的。大白条,尤其是突出的摄像头,乔布斯知道估计都能从坟里跳出来! 不喜欢的iPhone6的果粉可以等等了,iPhone7马上就要来临了,这是国外设计师设计出的一部iPhone7的概念图,这部iPhone7不仅做工精湛, 而且消除了打白条和涉嫌头突出问题,更重要的是采用了iPhone4的双面玻璃设计,边角做出了圆润设计,不仅时尚,而且商务气息十足, 适合追求时尚的年轻人和商务人士使用,受用人群更广泛了。 
</div> 
</body> 
<script type="text/javascript"> 
$(function(){ 
$("#content").mouseup(function(e){ 
if(window.getSelection) { 
var textObj = document.getElementById("content"); 
var selectedText = window.getSelection().toString(); 
alert(selectedText); 
selectedText = "<span style='background:red'>"+selectedText+"</span>"; 

var start = window.getSelection().anchorOffset; 
var end = window.getSelection().focusOffset; 

var tempStr1 = textObj.innerHTML.substring(0,start); 
var tempStr2 = textObj.innerHTML.substring(end); 

document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2 ; 

} 


}); 

}); 

</script> 
</html>



<input id="test" type="button" value="test"></input>
<div contenteditable="true" id="textarea" style="width:100px;height:100px;border:1px solid"></div>

$(function() {
    $("#test").bind("click",function() {
         var selectTxt;  
        if(window.getSelection){
           
          selectTxt=window.getSelection();  
        }else if(document.selection){ 
           
          selectTxt=document.selection.createRange().text;  
              }  
          alert(selectTxt);
    });
});

http://www.zhangxinxu.com/study/201104/range-miniblog-insert-topic.html

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值