`

javascript中createTextRange用法

阅读更多
from:http://www.9ba.cn/post/356.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>
分享到:
评论

相关推荐

    js createRange与createTextRange的一些用法实例

    关于createTextRange和createRange的一些用法,脚本之家增强版。

    createTextRange()的使用示例含文本框选中部分文字内容

    代码如下: [removed] function test() { var rng=document.body.createTextRange(); alert&#40;rng.text&#41; } function test1() { var rng=document.body.createTextRange(); alert&#40;rng.htmlText&#41; } ...

    javascript在一段文字中的光标处插入其他文字

    例如:一个文本框里有一段文字...[removed] function setCaret(textObj){ if(textObj.createTextRange){ textObj.caretPos=document.selection.createRange().duplicate(); } } function insertAtCaret(textObj,

    javascript实现复制与粘贴操作实例

    本文实例讲述了javascript实现复制与粘贴操作的方法。分享给大家供大家参考。 具体实现方法如下: 代码如下:[removed] function readTxt() { alert&#40;window.clipboardData.getData(“text”&#41;); } ...

    通过JavaScript脚本复制网页上的一个表格

    在Msdn中发现只有Body、TextArea等对象支持createTextRange()方法,继续在msdn中仔细查阅了一下,createTextRange()返回的是一个 TextRange 对象,继续查阅 TextRange 对象,发现其有很多方法,先试了试findText...

    javascript 设置文本框中焦点的位置

    代码如下:var obj=document.getElementById(“txtUserID”) var range=obj.createTextRange() //选中文本的起始位置(从第3个字符之后开始) range.moveStart(“character”,3) //选中文本的结束位置(到全部字符的...

    javascript复制粘贴与clipboardData的使用

    window.clipboardData可以实现复制与粘贴的操作,它的getData 方法可以实现数据的读取,setData方法可以实现数据的设置 [removed] function readTxt() { alert&#40;window.clipboardData.getData("text"&#41;); } ...

    javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很...

    跨浏览器开发经验总结(四) 怎么写入剪贴板

    IE、 Firefox可以支持JavaScript往剪贴板写入内容 IE可以很方便的支持剪贴板内容写入命令,可以... 使用window.clipboardData的方法如下,代码中同时实现了Firefox下写入剪贴板的功能: 代码如下: if(window.clipboardD

    firefox下javascript实现高亮关键词的方法

     FireFox下有: var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    javascript高亮效果的二种实现方法

    js高亮方法一: 代码如下:[removed] function HighLight(nWord){ if(nWord!=”){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”)...

    IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)

    主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择开始元素和偏移量,以及结束元素以及偏移量,那么我们可以用下面的例子把用户选择的内容用js给标记起来 代码如下: &lt;head&gt; [removed...

    javsropt代码

    &lt;input style="ime-mode:disabled"&gt; 关闭输入法 &lt;br/&gt;光标是停在文本框文字的最后 &lt;script language="javascript"&gt; function cc() { var e = event.srcElement; var r =e....

    JS中innerHTML和pasteHTML的区别实例分析

    pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上 例: [removed] function addLink(){ var ...

    js移动焦点到最后位置的简单方法

    当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。...其实可以将moveStart这行删除,因为createTextRange方法创建range后,利用collaps

    用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. ... i++) { var rng = document.body.createTextRange(); while (rng.

    copy.js:由 js 复制!

    其中核心的代码就是一个选中文本的方法: function selectText (element) { var text = element, range, selection; if (body.createTextRange) { // IE range = body.createTextRange();

Global site tag (gtag.js) - Google Analytics