`
kakaluyi
  • 浏览: 445008 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

createTextRange()对象经典范例

阅读更多

<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>光标位置</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.moveStart("character",pn);   
   
rng.collapse(true);    
   
rng.select();   
   
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)   
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>  

分享到:
评论

相关推荐

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

    首先,`createTextRange()` 是针对特定元素(如 `input` 或 `div`)调用的,返回一个表示该元素内文本的 `TextRange` 对象。例如: ```javascript var rng = document.getElementById("myElement").createTextRange...

    JavaScript中textRange对象使用方法小结

    在上面的代码中,首先通过`createTextRange()`方法创建了一个TextRange对象,然后调用`move()`方法将文本光标移动到用户指定的字符位置。`move()`方法第一个参数指定了移动的单位,这里是"character"(字符),第二...

    TextRange对象和selection对象实例

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

    js createRange与createTextRange的一些用法实例

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

    Javascript 实现复制(Copy)动作方法大全_.docx

    首先,需要获取文本框的对象,然后使用 `select()` 方法选择对象,最后使用 `execCommand("Copy")` 方法执行扫描器复制指令。 二、复制专题地址和 URL 地址,传给 MSN 上的好友 本方法使用 `clipboardData` 对象来...

    WEB页面导出为WORD、EXCEL文档的方法(源代码)

    该函数使用 ActiveXObject 对象来创建 WORD 应用程序,然后使用 createTextRange() 方法来选择要导出的页面区域,并使用 execCommand("Copy") 方法将其复制到 WORD 文档中。 AllAreaExcel() 函数用于将指定的页面...

    处理文本部分内容的TextRange对象应用实例

    尽管在现代浏览器中DOM Range对象更常见,但TextRange对象在处理特定的文本操作时仍然有价值,尤其是在兼容旧版IE浏览器的场景下。 TextRange对象提供了一系列的方法,如`select()`用于选取文本,`collapse()`用于...

    光标定位方法

    对于IE浏览器,可以使用`createTextRange()`方法创建一个范围对象,并通过一系列方法来移动光标到指定位置: ```javascript function setCaretPosition(ctrl, pos) { if (ctrl.setSelectionRange) { ctrl.focus()...

    经典 js 经典 js 经典 js

    var r = e.createTextRange(); r.moveStart('character', e.value.length); r.collapse(true); r.select(); } ()"&gt; ``` **解释**:此代码段用于自动将光标定位到文本框的末尾。这对于需要用户立即输入内容的...

    Javascript中最常用的55个经典技巧

    8. **防止页面被嵌入框架**:通过检查`window`对象与`top`对象是否相等,可以确保页面始终作为顶级窗口加载,防止被其他框架包含。 9. **防止被frame**:类似的,使用`if (top.location != self.location)`检查,...

    js操作word、excel.pdf

    首先,它创建了一个Word对象,然后使用`createTextRange()`和`select()`选择整个HTML表单的内容,执行`execCommand("Copy")`进行复制。接着,在Word文档中创建一个新的Range对象,并使用`Paste()`粘贴复制的内容。...

    利用js导出Web页面内容到Word、Excel

    然后,通过`document.body.createTextRange()`方法创建一个文本范围对象,该对象能够用于选择和复制页面上的文本。这里选择了ID为`PrintA`的表格元素,并将其内容复制到剪贴板中。最后,在Excel的工作表中粘贴这些...

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

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

    精彩编程与编程技巧-使用VB获得一页的HTML代码...

    - **知识点**: `createTextRange` 方法创建了一个 `TextRange` 对象,这个对象可以用来选取文档的一部分,并提供了一些有用的方法和属性,比如 `htmlText` 属性可以获取选中文本的HTML表示形式。 4. **变量声明与...

    js导出excel的方法

    本文将详细介绍几种使用JavaScript实现导出数据到Excel的方法,包括利用ActiveX对象的方式以及纯JavaScript的方式。 #### 方法一:使用ActiveX对象(仅适用于IE浏览器) 此方法基于Internet Explorer提供的ActiveX...

    JS 导出页面可选区域到Word文档

    1. **利用`ActiveXObject`创建Office对象**:通过JavaScript创建Excel或Word应用程序实例。 2. **页面内容的选择与复制**:使用`createTextRange()`方法选择并复制指定元素的内容。 3. **内容粘贴至Office文档**:...

    IF、FF兼容,TextBox获得焦点后,光标停在最后

    如果支持,创建一个TextRange对象,然后通过`range.collapse(false)`将光标放置在文本的末尾,最后调用`range.select()`选择整个文本范围,使光标出现在末尾。 - 如果浏览器不支持`createTextRange`(如Firefox),...

Global site tag (gtag.js) - Google Analytics