`

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的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二、获取指定文本框中的选中的文字:只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三、页面...

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

    - `getPos()` 函数通过 `createTextRange()` 和 `document.selection.createRange()` 获取光标当前位置的字符距离。 - `setPos(num)` 函数允许设定光标在输入框内的位置,传入参数为字符数。 这些示例展示了 `...

    光标定位方法

    3. 使用`moveEnd()`和`moveStart()`方法移动范围的结束位置和开始位置。 4. 通过`select()`方法将光标移动到指定位置。 ##### Firefox支持 对于Firefox和其他现代浏览器,则可以直接使用`setSelectionRange()`方法...

    JavaScript记录光标在编辑器中位置的实现方法_.docx

    然而,对于不支持这些属性的老版IE浏览器,我们需要使用`document.selection`对象和`createRange()`方法来获取光标位置。以下是一个兼容IE的实现: ```javascript if (typeof(textBox.selectionStart) == "number")...

    javascript网页关键字高亮代码.docx

    `createTextRange()`方法创建TextRange对象,`getBookmark()`和`moveToBookmark(bookmark)`用于保存和恢复Range的位置。 3. **findText()方法**:IE特有的方法,用于在文本中查找指定的字符串,并返回找到的文本...

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

    在支持createRange的现代浏览器如Firefox和IE9中,可以使用createRange来很容易地完成这一任务,但在IE6至IE8中,必须依赖于createTextRange方法。 为了解决问题,我们首先需要理解createTextRange方法的工作原理。...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    var re = input.createTextRange(), rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); return rc.text.length; } } ``` 这个函数首先检查`selectionStart`属性,...

    TextRange对象和selection对象实例

    在早期的Internet Explorer浏览器中,为了方便用户在网页上操作文本(例如复制、粘贴、查找等),开发了一套独特的对象模型来支持这些功能,其中两个核心对象是`TextRange`和`Selection`。这两个对象不仅能够帮助...

    js获取光标位置和设置文本框光标位置示例代码

    在JavaScript中,获取和设置文本框(input[type="text"])或文本域(textarea)的光标位置是一项常见的任务,特别是在实现用户交互功能时。在不同的浏览器中,处理光标位置的方法有所不同,主要分为IE浏览器和其他非...

    js设置文字颜色的方法示例

    在现代浏览器中,使用`document.createRange()`和`window.getSelection()`来获取和操作文本范围。而在旧版本的IE中,使用`document.body.createTextRange()`。 对于现代浏览器,代码如下: ```javascript if ...

    javascript关键字高亮代码

    var range = document.body.createTextRange(); bookmark = range.getBookmark(); } var key; for (var i = 0; key = keys[i]; i++) { if (range.findText) { range.collapse(true); range.moveToBookmark...

    javascript设置文本框光标的方法实例小结

    JavaScript提供了丰富的API来处理DOM元素,包括文本框和文本区域,允许我们实现各种复杂的用户界面效果和交互。 总的来说,理解并熟练运用这些光标操作方法,能够帮助开发者提升用户体验,使应用程序更加友好和高效...

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

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

    JavaScript 获取/设置光标位置,兼容Input&amp;&amp;TextArea

    在设置光标位置时,主要使用的方法是`selectionStart`和`selectionEnd`属性(在现代浏览器中),以及使用`document.selection.createTextRange`方法配合`move`和`moveStart`方法(在IE浏览器中)。设置光标位置的...

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

    对于仍然支持`createTextRange()`的老版本IE浏览器,我们可以使用类似的方法,但需替换为`createTextRange()`和`moveToElementText()`。`moveToElementText()`方法将文本范围移动到指定元素的文本内容上,从而选择...

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

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

    js 获取光标在文本框中的位置

    类似地,我们可以使用`element.setSelectionRange(start, end)`或`createTextRange`方法来设置光标位置。这在动态处理文本输入或实现自定义编辑器时非常有用。 7. **应用场景**: 获取光标位置常用于实时输入验证...

    javascript网页关键字高亮代码

    现代浏览器支持`document.createRange()`,而旧版IE浏览器则使用`document.body.createTextRange()`。 ```javascript if (document.createRange) { var range = document.createRange(); } else { var range = ...

Global site tag (gtag.js) - Google Analytics