这两天在做跨浏览器的粘贴、复制、剪切功能。
本以为是很简单的事,原来并不简单。
网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案(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>
来源:oschina
链接:https://my.oschina.net/u/569082/blog/80502