Return selectionStart for div?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jen_designs@hotmail.com
    #1

    Return selectionStart for div?

    I need to find a way to determine the character position of a users
    selection in a div. I can do this with the following using an input
    text box. Any way for a div or any text within the body tags?

    <html>
    <body>
    <form>
    <div onkeyup="s(this )" onclick="s(this )" id="myDiv">Thi s is some
    text</div>
    <input type="text" onkeyup="s(this )" onclick="s(this )" value="This is
    some text">
    </form>
    <script type="text/javascript">
    function s(el)
    {
    var sel, rng, r2, i=-1;

    //firefox
    if(typeof el.selectionSta rt=="number")
    {
    i=el.selectionS tart;
    }
    //ie
    else if(document.sel ection && el.createTextRa nge)
    {
    sel=document.se lection;
    if(sel)
    {
    r2=sel.createRa nge();
    rng=el.createTe xtRange();
    rng.setEndPoint ("EndToStart ", r2);
    i=rng.text.leng th;
    }
    }
    else
    {
    el.onkeyup=null ;
    el.onclick=null ;
    }
    alert(i)
    }
    </script>
    </body>
    </html>

    Tags: javascript selectionstart
    • Yann-Erwan Perio
      #2
      Re: Return selectionStart for div?

      jen_designs@hot mail.com wrote:
      [color=blue]
      > I need to find a way to determine the character position of a users
      > selection in a div.[/color]

      The following should demonstrate some methods you can use with ranges;
      tested IE6 and Mozilla 1.7.


      ---
      <div
      onmouseup="aler t(getCharPositi on(this));"
      onmousedown="pr epare(this)">He llo, World</div>

      <script type="text/javascript">
      var getCharPosition =(function(){

      function getSel(){
      var sel=null;
      if(
      typeof document.select ion!="undefined " &&
      document.select ion &&
      document.select ion.type=="Text "
      ){
      sel=document.se lection;
      } else if(
      window.getSelec tion &&
      window.getSelec tion().rangeCou nt>0
      ){
      sel=window.getS election();
      }
      return sel;
      }

      function createRangeFrom Sel(sel){
      var rng=null;
      if(sel.createRa nge) {
      rng=sel.createR ange();
      } else if(sel.getRange At) {
      rng=sel.getRang eAt(0);
      if(rng.toString ()=="") rng=null;
      }
      return rng;
      }

      return function(el){
      var sel=getSel(), rng, r2, i=-1;
      if(sel){
      rng=createRange FromSel(sel);
      if(rng){

      if(rng.parentEl ement) {
      if(rng.parentEl ement()==el){
      r2=document.bod y.createTextRan ge();
      r2.moveToElemen tText(el);
      r2.collapse(tru e);
      r2.setEndPoint( "EndToStart ", rng);
      i=r2.text.lengt h;
      }
      } else {
      if(
      rng.startContai ner &&
      rng.endContaine r &&
      rng.startContai ner==rng.endCon tainer &&
      rng.startContai ner==rng.common AncestorContain er &&
      rng.commonAnces torContainer.pa rentNode==el
      ){

      //make sure your DIV does not have any inner element,
      //otherwise more code is required in order to filter
      //text nodes and count chars

      i=rng.startOffs et;
      }
      }
      }
      }
      return i;
      };

      })();

      function prepare(el){
      if(el.normalize ) {
      el.normalize();
      }
      }
      </script>
      ---


      HTH,
      Yep.

        Comment

        Previous template Next
        Working...