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>
原始出處找不到了。