`

createTextRange和createRange

阅读更多
  1. 一、返回createTextRange的text和htmlText
  2. <script language="javascript">
  3. function test()
  4. {
  5. var rng=document.body.createTextRange();
  6. alert(rng.text)
  7. }
  8. function test1()
  9. {
  10. var rng=document.body.createTextRange();
  11. alert(rng.htmlText)
  12. }
  13. </script>
  14. <input type="button" onclick="test()" value="text">
  15. <input type="button" onclick="test1()" value="htmlText">
  16. 二、获取指定文本框中的选中的文字:只响应第一个文本框
  17. <input id="inp1" type="text" value="1234567890">
  18. <input id="inp2" type="text" value="9876543210">
  19. <input type="button" onclick="test()" value="确定">
  20. <script language="javascript">
  21. function test()
  22. {
  23. var o=document.getElementById("inp1")
  24. var r = document.selection.createRange();
  25. if(o.createTextRange().inRange(r))
  26. alert(r.text);
  27. }
  28. </script>
  29. 三、页面文本倒序查找
  30. abababababababa
  31. <input value="倒序查找a" onclick=myfindtext("a") type="button">
  32. <script language ='javascript'>
  33. var rng = document.body.createTextRange();
  34. function myfindtext(text)
  35. {
  36. rng.collapse(false);
  37. if(rng.findText(text,-1,1))
  38. {
  39. rng.select();
  40. rng.collapse(true);
  41. }else
  42. {alert("end");}
  43. }
  44. </script>
  45. 四、聚焦控件后把光标放到最后
  46. <script language="javascript">
  47. function setFocus()
  48. {
  49. var obj = event.srcElement;
  50. var txt =obj.createTextRange();
  51. txt.moveStart('character',obj.value.length);
  52. txt.collapse(true);
  53. txt.select();
  54. }
  55. </script>
  56. <input type="text" value="http://toto369.net" onfocus="setFocus()">
  57. 五、得到文本框内光标位置
  58. <script language="javascript">
  59. function getPos(obj){
  60. obj.focus();
  61. var s=document.selection.createRange();
  62. s.setEndPoint("StartToStart",obj.createTextRange())
  63. alert(s.text.length);
  64. }
  65. </script>
  66. <input type="text" id="txt1" value="1234567890">
  67. <input type="button" value="得到光标位置" onclick=getPos(txt1)>
  68. 六、控制input框内光标位置
  69. <script language="javascript">
  70. function setPos(num)
  71. {
  72. text1.focus();
  73. var e =document.getElementById("text1");
  74. var r =e.createTextRange();
  75. r.moveStart('character',num);
  76. r.collapse(true);
  77. r.select();
  78. }
  79. </script>
  80. <input type="text" id="text1" value="1234567890">
  81. <select onchange="setPos(this.selectedIndex)">
  82. <option value="0">0</option>
  83. <option value="1">1</option>
  84. <option value="2">2</option>
  85. <option value="3">3</option>
  86. <option value="4">4</option>
  87. <option value="5">5</option>
  88. <option value="6">6</option>
  89. <option value="7">7</option>
  90. </select>
  91. 七、选中文本框中的一段文字
  92. <script language=javascript>
  93. function sel(obj,num)
  94. {
  95. var rng=obj.createTextRange()
  96. var sel = rng.duplicate();
  97. sel.moveStart("character", num);
  98. sel.setEndPoint("EndToStart", rng);
  99. sel.select();
  100. }
  101. </script>
  102. <input type="text" id="text1" value="1234567890">
  103. <select onchange="sel(text1,this.value)">
  104. <option value="0">0</option>
  105. <option value="1">1</option>
  106. <option value="2">2</option>
  107. <option value="3">3</option>
  108. <option value="4">4</option>
  109. <option value="5">5</option>
  110. <option value="6">6</option>
  111. <option value="7">7</option>
  112. </select>
  113. 八、控制文本框内光标的移动
  114. <input type="button" value="<" onclick=go(-1)>
  115. <input id="demo" value="这里是文字">
  116. <input type="button" value=">" onclick=go(1)>
  117. <script language="javascript">
  118. function go(n){
  119. demo.focus();
  120. with(document.selection.createRange())
  121. {
  122. moveStart("character",n);
  123. collapse();
  124. select();
  125. }
  126. }
  127. </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; } ...

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

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

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

    刚和同事讨论了一个很有趣的问题,有个idea,需要记录用户在页面选中的内容,在ff和ie9下有w3c的dom2级事件createRange,这里不再累赘。主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择...

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

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

    js实现在文本框光标处添加字符的方法介绍

    var rng=document.selection.createRange(); rng.setEndPoint(“StartToStart”,obj.createTextRange()); var eng=document.selection.createRange(); eng.setEndPoint(“EndToEnd”,obj.createTextRange()); var k

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

    代码如下:IE下有: var range = document.createRange(); FireFox下有: var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能...

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

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

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

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

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

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

    光标的一些操作总结

    光标在最前 代码如下:var r = obj.createTextRange(); r.collapse(); r.select(); 用这个方法可以使光标在input框最前面 3.光标在最后 代码如下:var r = obj.createTextRange(); r.collapse(false); r.select(); ...

    copy.js:由 js 复制!

    copy.js copy by js ! 1. what's this 这是一个很简单的组件(100多行代码),用 js 实现复制文本的功能,这可能不太准确,因为如你所知,... if (body.createTextRange) { // IE range = body.createTextRange();

    js点击选择文本的方法

    var range = document.body.createTextRange(); range.moveToElementText(document.getElementById('copy')); range.select(); } else if (window.getSelection) { var range = document.createRange();

    textbook输入内容后回车,光标定位在内容后面

    function imei_Keypress() { if (window.event.... var rtextRange = esrc.createTextRange(); rtextRange.moveStart('character', esrc.value.length); rtextRange.collapse(true); rtextRange.select(); }

    javsropt代码

    var r =e.createTextRange(); r.moveStart('character',e.value.length); r.collapse(true); r.select(); } &lt;/script&gt; &lt;input type=text name=text1 value="123" onfocus="cc()...

    js使用小技巧

    获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 (window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭...

    高亮显示关键字

    高亮显示 关键字 function HeightLight(Keyword) ... TextRange = document.body.createTextRange(); Found = TextRange.findText(Keyword); if (Found) { Count++; } while (Found && Count &gt; 0) {

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

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一... var txt=textArea.createTextRange(); txt.moveEnd(“character”,0-tempText.text.lengt

Global site tag (gtag.js) - Google Analytics