JS操作剪切板

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>


原始出處找不到了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章