JS操作剪切板

良才2015

关注

转载最新推荐文章于 2026-05-05 09:06:28 发布 1k 阅读 AI 写同款· GEO 优化 ›

Python与JS剪切板与URL操作实战：自动化开发核心技能在软件开发中，数据交换与资源定位是基础且关键的技术环节。其核心原理在于操作系统与浏览器提供的标准接口，允许程序与系统环境进行安全可控的交互。掌握这些技术，对于提升自动化脚本、数据采集工具及Web应用的交互效率具有重要价值。典型的应用场景包括自动化测试中的数据填充、网络爬虫的链接处理、Web应用的一键复制功能以及API请求的动态构建。本文将聚焦于两大高频需求：系统剪切板的程序化读写与URL的解析验证，通过对比Python的pyperclip、urllib.parse库与JavaScript的Clipboard 阅读详情

FF--IE (兼容) 数据直接添加到剪切板

function CopyContent(copy)  {   
    if (window.clipboardData) {   
      window.clipboardData.setData("Text", copy);   
    }   
    else if (window.netscape) {   
      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');   
      var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);   
      if (!clip) return;   
         var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);   
         if (!trans) return;   
         trans.addDataFlavor('text/unicode');   
         var str = new Object();   
         var len = new Object();   
         var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);   
         var copytext=copy;   
         str.data=copytext;   
         trans.setTransferData("text/unicode",str,copytext.length*2);   
         var clipid=Components.interfaces.nsIClipboard;   
         if (!clip) return false;   
         clip.setData(trans,null,clipid.kGlobalClipboard);   
     }   
     alert("复制成功！！");   
     return false;      
}

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
 <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> 
 <meta name="ProgId" content="FrontPage.Editor.Document"> 
 <title>光标位置-www.0097.org</title> 
 <style> 
  INPUT{border: 1 solid #000000} 
  BODY,TABLE{font-size: 10pt} 
 </style> 
 </head> 
 <body> 
 <table border="0" width="700" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td width="479" rowspan="7"> 
 点击 TextArea 实现光标定位 
 <p> 
 <textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸 
 为了你我愿意 
 动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离 
 如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹 
 也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里 
 我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离 
 </textarea> 
 
 <script> 
 function movePoint() { 
 	var pn = parseInt(pnum.value); 
 	if(isNaN(pn)) return; 
 	var rng = box.createTextRange(); 
   	/ /rng.findText("你");	//下面有解释
 	rng.moveStart("character",pn); 
 	rng.collapse(true);		//ture为光标指示到起点，false光标指示到终点
 	rng.select();			//同样可以用rng.move("character",pn)来实现无需上一步
 	returnCase(rng) 
 } 
 
 function tellPoint() { 
 	var rng = event.srcElement.createTextRange(); 
 	rng.moveToPoint(event.x,event.y); 
 	rng.moveStart("character",-event.srcElement.value.length) 
 	pnum.value = rng.text.length 
 	returnCase(rng) 
 } 
 
 function returnCase(rng) { 
 	bh.innerText = rng.boundingHeight; 
 	bl.innerText = rng.boundingLeft; 
 	bt.innerText = rng.boundingTop; 
 	bw.innerText = rng.boundingWidth; 
 	ot.innerText = rng.offsetTop; 
 	ol.innerText = rng.offsetLeft; 
 	t.innerText = rng.text; 
 } 
 
 function selectText(sp,ep) { 
 	sp = parseInt(sp) 
 	ep = parseInt(ep) 
 	if(isNaN(sp)||isNaN(ep))  return; 
 	var rng = box.createTextRange(); 
 	rng.moveEnd("character",-box.value.length)   //这里要注意-length是让光标的起始点和终止点都回到起始处
 	rng.moveStart("character",-box.value.length) 
 	rng.collapse(true); 
 	rng.moveEnd("character",ep)                            //注意的是先后顺序
 	rng.moveStart("character",sp) 
 	rng.select(); 
 	returnCase(rng); 
 } 
 
 var rg = box.createTextRange(); 
 
 function findText(tw) { 
 	if(tw=="") return; 
 	var sw = 0; 
 	if(document.selection) { 
 		sw = document.selection.createRange().text.length; 
 	} 
 	rg.moveEnd("character",box.value.length);  
 	rg.moveStart("character",sw); 
 	if(rg.findText(tw)) { 
 		rg.select(); 
 		returnCase(rg); 
 	} 
 	if(rg.text!=tw) { 
 		alert("已经搜索完了") 
 		rg = box.createTextRange() 
 	} 
 } 
 </script> 
 </p> 
 <p></p> 
 光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置"> 
 <p></p> 
 选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择"> 
 <p></p> 
 选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择"> 
 </td> 
 <td width="217">boundingHeight: <span id="bh"></span></td> 
 </tr> 
 <tr> 
 <td width="217">boundingWidth: <span id="bw"></span></td> 
 </tr> 
 <tr> 
 <td width="217">boundingTop: <span id="bt"></span></td> 
 </tr> 
 <tr> 
 <td width="217">boundingLeft: <span id="bl"></span></td> 
 </tr> 
 <tr> 
 <td width="217">offsetLeft: <span id="ol"></span> </td> 
 </tr> 
 <tr> 
 <td width="217">offsetTop: <span id="ot"></span> </td> 
 </tr> 
 <tr> 
 <td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td> 
 </tr> 
 </table> 
 </body> 
 
 </html>

经过多次调试才弄明白,当光标move时,它的开始和结束点是重合的,
所以如果move的话那它的头和尾的光标在一起，如果要选择区域的话就要两者都设,比如
rng.move("character",2);
rng.moveEnd("character",2);
rng.select()显示高亮，
如果我们没有将光标移动也就是（var rng = box.createTextRange()）状态，
那它的光标起始在头部，结束在尾部（可以负移动moveEnd），所以你moveStart就可以选择到文本最后的高亮，
而如果我们已经将光标有所移动比如：rng.findText("你");这样光标的起始和终点其实也是已经重合在了一起，
这个时候你moveStart不动的话那就必须要通过移动moveEnd来显示高亮，

---------------我注明是摘自LxcJie的专栏：）
<HTML>
<STYLE>
.notChangePartValue...{
input:expression(regInput(this));
}
</STYLE>
<SCRIPT language="javascript">
function regInput(obj)...{

obj.ondrop = function()...{return false;}

obj.oncontextmenu = function()...{return false;}

obj.onkeydown = function() ...{
        restrictInputValue(obj)
    }
}

function restrictInputValue(obj)...{
    var range = obj.createTextRange();

    if(typeof(obj.initWidth) == "undefined")...{
        obj.initWidth = range.boundingWidth;
    }
    var selRange = document.selection.createRange();

    if(selRange.text.length == 0)...{
        selRange.setEndPoint("StartToStart",range);
        var currentWidth = selRange.boundingWidth;
        if(currentWidth < obj.initWidth)...{
            if(event.keyCode < 33 || event.keyCode > 40
                || event.keyCode == 46 || event.keyCode == 8)
                event.returnValue = false;
        }
        if(currentWidth == obj.initWidth)...{
            if(event.keyCode == 8)
                event.returnValue = false;
        }
    }
    else...{
        selRange.moveEnd("character",-selRange.text.length);            //据我测试利用selRange.collapse(true)即可
        selRange.setEndPoint("StartToStart",range);
        var currentWidth = selRange.boundingWidth;
        if(currentWidth <= obj.initWidth-1)...{
            if(event.keyCode < 33 || event.keyCode > 40)
               event.returnValue = false;
        }
    }
}
</SCRIPT>
<BODY>
<INPUT type="text" value="Soft" class="notChangePartValue">
</BODY>
</HTML>

今天仔细研究了一下setEndPoint的用法：给它的定义是t根据其它范围的结束点设置某范围的结束点

<SCRIPT language="javascript">
function aaa(){
 var rng = document.getElementById("aa").createTextRange(); 
 var rng1 = document.getElementById("aa").createTextRange(); 
 var selRange = document.selection.createRange();
 selRange.setEndPoint("StartToStart",rng);
 selRange.setEndPoint("EndToEnd",rng);
 alert(selRange.text.length)
 selRange.select()
 }
 </SCRIPT>
 <html>
 <BODY>
 <INPUT type="text" value="Softasdfasdfasfdaf" id="aa"  onclick="aaa()">
 <form name="form1" method="post" action="">
   <input type="button" name="Button" value="Button" onClick="aaa()">
 </form>
 </BODY>
 </HTML>

上面是文本框的例子, selRange.setEndPoint("StartToStart",rng);的意思就是我们光标点开始往后的文本,selRange.setEndPoint("EndToEnd",rng);是光标点往前的文本,我们可以通过rng.move("character",4)来设置光标点,测试这个例子就明白了,

<SCRIPT language="javascript">
function aaa(){
 var rng = document.getElementById("aa").createTextRange(); 
 var rng1 = document.getElementById("aa").createTextRange(); 
 var selRange = document.selection.createRange();
 rng.move("character",4)
 //rng1.setEndPoint("StartToStart",rng);
 selRange.setEndPoint("EndToEnd",rng);
 alert(rng1.text)
 }
 </SCRIPT>
 <html>
 <BODY>
 <INPUT type="text" value="Softasdfasdfasfdaf" id="aa"  onclick="aaa()">
 <form name="form1" method="post" action="">
   <input type="button" name="Button" value="Button" onClick="aaa()">
 </form>
 </BODY>
 </HTML>

javascript中createTextRange用法
返回createTextRange的text和htmlText
<script language="javascript">
function test(){
var rng=document.body.createTextRange();
alert(rng.text)
}
function test1(){
var rng=document.body.createTextRange();
alert(rng.htmlText)
}
</script>
<input type="button" onclick="test()" value="text">
<input type="button" onclick="test1()" value="htmlText">
获取指定文本框中的选中的文字：只响应第一个文本框
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" onclick="test()" value="确定">
<script language="javascript">
function test(){
var o=document.getElementById("inp1")
var r = document.selection.createRange();
if(o.createTextRange().inRange(r))
alert(r.text);
}
</script>
页面文本倒序查找
abababababababa
<input value="倒序查找a" onclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = document.body.createTextRange();
function myfindtext(text){
rng.collapse(false);
if(rng.findText(text,-1,1)){
rng.select();
rng.collapse(true);
}else{alert("end");}
}
</script>
聚焦控件后把光标放到最后
<script language="javascript"> 
function setFocus() { 
var obj = event.srcElement; 
var txt =obj.createTextRange(); 
txt.moveStart('character',obj.value.length); 
txt.collapse(true); 
txt.select(); 
} 
</script> 
<input type="text" value="http://toto369.net" onfocus="setFocus()">
得到文本框内光标位置
<script language="javascript">
function getPos(obj){
obj.focus();
var s=document.selection.createRange();
s.setEndPoint("StartToStart",obj.createTextRange())
alert(s.text.length);
}
</script>
<input type="text" id="txt1" value="1234567890">
<input type="button" value="得到光标位置" onclick=getPos(txt1)>
控制input框内光标位置
<script language="javascript">
function setPos(num){
text1.focus();
var e =document.getElementById("text1");
var r =e.createTextRange();
r.moveStart('character',num);
r.collapse(true);
r.select();
}
</script>
<input type="text" id="text1" value="1234567890">
<select onchange="setPos(this.selectedIndex)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
选中文本框中的一段文字
<script language=javascript>
function sel(obj,num){
var rng=obj.createTextRange()
var sel = rng.duplicate();
sel.moveStart("character", num);
sel.setEndPoint("EndToStart", rng);
sel.select();
}
</script>
<input type="text" id="text1" value="1234567890">
<select onchange="sel(text1,this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
控制文本框内光标的移动
<input type="button" value="<" onclick=go(-1)> 
<input id="demo" value="这里是文字">
<input type="button" value=">" onclick=go(1)> 
<script language="javascript">
function go(n){
demo.focus();
with(document.selection.createRange()){
moveStart("character",n);
collapse();
select();
}
}
</script>

原始出处找不到了。

收录于