javascript 实现跨浏览器的粘贴，复制，剪切功能（转）

最新推荐文章于 2024-07-23 11:32:13 发布

weixin_33727510

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量152

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/suyewanwan/blog/80502

版权

2019独角兽企业重金招聘Python工程师标准>>>

这两天在做跨浏览器的粘贴、复制、剪切功能。

本以为是很简单的事，原来并不简单。

网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案（zero clipboard.js）。没有跨浏览器粘贴的。

后来想到，能不能不用剪切板，而是纯js。用一个全局变量存放选中的文本，再在光标所在处粘贴。

网上一查，有类似的例子。于是小修下，分享之。

可以兼容ie789 chrome firefox safari等

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>copy&past</title>
<script type="text/javascript"> 
var selecttext=""; 
function InsertString(tbid){
    var str = selecttext;
    var tb = document.getElementById(tbid);
    tb.focus();
    if (document.all){
        var r = document.selection.createRange();
        document.selection.empty();
        r.text = str;
        r.collapse();
        r.select();
    }
    else{
        var newstart = tb.selectionStart+str.length;
        tb.value=tb.value.substr(0,tb.selectionStart)+str+tb.value.substring(tb.selectionEnd);
        tb.selectionStart = newstart;
        tb.selectionEnd = newstart;
    }
}
function GetSelection(tbid){

    var sel = '';
    if (document.all){
        var r = document.selection.createRange();
        document.selection.empty();
        sel = r.text;
    }
    else{
    	var tb = document.getElementById(tbid);
    	   // tb.focus();
        var start = tb.selectionStart;
        var end = tb.selectionEnd;
        sel = tb.value.substring(start, end);
    }
    return sel;
}
function ShowSelection(tbid){
	var sel = GetSelection(tbid);
    if (sel){
        alert('你选中的文本是 : '+sel);
         selecttext=sel;
    }else {
        alert('未选中文本');
    }
}
</script>
</head>
<body>
    <form><textarea id="txtContent" cols="50" rows="5">这里是一些内容，你可以测试复制和粘贴
http://witmax.cn</textarea><br /><br />
    
    <input type = "button" value = "复制" onclick="ShowSelection('txtContent');"/><br />
    <input type = "button" value = "粘贴" onclick="InsertString('txtContent');"/>
    <div id="tip"></div>
    </form>
   
</body>
</html>

转载于:https://my.oschina.net/suyewanwan/blog/80502