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