javascript 实现跨浏览器的粘贴,复制,剪切功能(转)

十年热恋 提交于 2019-12-04 02:29:21

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

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

网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案(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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!