您的位置：首页 > 其它

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

2017-06-14 09:52 375 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航