`
thunderbow
  • 浏览: 156629 次
  • 性别: Icon_minigender_1
  • 来自: beijing
社区版块
存档分类
最新评论

点击 TextArea 实现光标定位

阅读更多
<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   language="javascript">   
  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>   

分享到:
评论
1 楼 javaAlpha 2009-09-25  
不错啊 搜藏了

相关推荐

    光标定位等TextRange的操作的范例代码

    点击 TextArea 实现光标定位 我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸 为了你我愿意 动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到...

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

    在本文中,我们将探讨如何在 textarea 元素中实现光标定位,同时确保兼容 Internet Explorer(IE)和 Firefox(FF)这两种主要的浏览器。 在 textarea 中设置光标位置是一个常见的需求,特别是在用户交互场景中,如...

    jQuery往textarea中光标所在位置插入文本的方法

    本文主要介绍如何使用jQuery在textarea元素中光标所在位置插入文本的技术,涉及到的操作和概念包括jQuery库的使用、文本框(textarea)的光标定位与操作、JavaScript中的字符串操作等。文章首先定义了jQuery的扩展...

    页面一载入光标定位到文本框,并选中其中文字

    接下来,使用JavaScript来实现光标定位和文本选中。这可以通过监听页面的`DOMContentLoaded`事件来完成,确保在DOM完全加载后执行。以下是一个简单的JavaScript示例: ```javascript document.addEventListener...

    将光标定位到textarea的某一行的javascript代码

    ### 知识点详解:将光标定位到textarea的某一行的JavaScript代码 #### 一、背景介绍 在Web开发中,我们经常会遇到需要在文本框(`textarea`)中进行复杂的文本编辑操作的需求。例如,在富文本编辑器或者代码编辑器...

    光标定位方法

    本文将详细介绍不同浏览器环境下实现光标定位的方法。 #### 一、获取光标位置 获取光标位置通常有两种方式:一种是针对IE浏览器的支持,另一种则是对Firefox和其他现代浏览器的支持。 ##### IE支持 对于Internet...

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    在JavaScript中,操作文本输入域,如`&lt;textarea&gt;`,涉及到光标位置的处理时,通常需要使用到浏览器提供的API。对于不同的浏览器,这些API可能会有所差异。在处理`&lt;textarea&gt;`光标位置插入文字并移动光标到文字末尾的...

    textarea文本框删除当前行内容的功能

    在某些场景下,我们可能需要实现一个功能,即当用户点击某个按钮时,删除`textarea`中当前光标所在行的内容。这个功能在编辑器、表单或任何需要处理多行文本的界面中都很实用。本文将详细讲解如何实现这一功能,并...

    Vue中div contenteditable 的光标定位方法

    4. 光标定位的具体实现: 我们可以创建一个名为`keepLastIndex`的函数,该函数能够获取当前窗口的选择范围(Range),并将其移动到div的末尾。这样无论内容如何更新,光标都会被正确地放置在最后。 在函数中,首先...

    js/html光标定位的实现代码

    在本文中,我们主要通过JavaScript来实现一个自定义函数,用于实现光标定位的功能。这种方法不仅可以帮助我们更好地控制页面元素,还可以在特定条件下提供更加个性化的用户体验。 首先,光标定位的基本实现原理是...

    javascript获得光标所在的文本框(text/textarea)中的位置

    标题和描述提到的`js 光标 文本框`,就是指通过JavaScript实现对文本输入光标的定位和获取。下面将详细介绍这个功能的实现方式以及相关知识点。 在非IE浏览器中,如Firefox、Chrome等,我们可以使用`selectionStart...

    jQuery实现在textarea指定位置插入字符或表情的方法

    在聊天、论坛或者博客评论等应用场景中,用户可能需要在输入的文字中插入特定的字符,比如表情符号,而这些字符需要被精确地定位到用户当前的光标位置。为此,我们需要编写一个jQuery扩展方法来实现这一功能。 1. *...

    js插入字符到textarea的效果代码

    8. 如果存在document.selection属性,那么首先将光标放置在textarea的当前焦点位置,然后创建选区对象sel,并使用sel.text赋值为要插入的文本tag。这是旧版IE浏览器插入文本的方法。 9. 如果浏览器不支持document....

    在kindEditor中获取当前光标的位置索引的实现代码

    在网页富文本编辑器开发中,KindEditor是一个广泛使用的开源编辑器,它提供了丰富的功能和...通过`startOffset`和`endOffset`,我们可以精确地定位光标位置,从而实现诸如插入文本、高亮选择、查找替换等一系列功能。

    自动朗读文本2.0一款可设置起始点语音转文字软件.exe

    文本框使用 textarea 标签,通过 textarea 的光标事件获取鼠标光标定位的设置的朗读起点,具体参考 MDN 通过网页语音 API 实现朗读,具体参考 SpeechSynthesis 默认从头开始朗读,光标点到想要开始的位置,点击设置...

    javascript控制在光标位置插入文字适合表情的插入

    接下来,函数会检测浏览器是否支持document.selection对象,这是因为IE和其他浏览器在实现光标位置处理上有所区别。 在支持document.selection的浏览器中,可以通过document.selection.createRange()方法获取当前...

    JS实现在文本指定位置插入内容的简单示例

    用户可以在`textarea`中输入文本,然后在旁边的`input`文本框中输入要插入的内容,点击“插入”按钮后,`insertAtCursor`函数会被触发,选中的文本会被替换为用户输入的内容,并将光标定位到新内容之后。 此外,...

    网站开发制作40个技巧.txt

    ### 技巧14:光标定位 - **实现方式**:使用JavaScript实现自动将光标移动到文本框的末尾。 - **示例代码**: ```html function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart...

    第6章 Dreamweave中表格和表单的应用.pptx

    2. **填充表格内容**:插入表格后,只需将光标定位到相应单元格,就可以直接输入文本或插入图像。这是向表格添加内容的基本方法。 3. **选择表格**:选择表格有不同的方式,如选择整个表格、整行或整列、单个单元格...

    javascript开发技巧

    光标定位到最后 当文本框获得焦点时,光标自动移动到最后。 ```html function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e.value.length); r.collapse(true...

Global site tag (gtag.js) - Google Analytics