www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with an IE workaround to find selectionStart and selectionEnd of a textarea

  1. #1
    Join Date
    Jul 2003
    Posts
    259

    Help with an IE workaround to find selectionStart and selectionEnd of a textarea

    Hi,

    I've had this code that works half the time in IE (and the other half I tip-toed around it to make it work) to find the selectionStart and selectionEnd of a textarea.

    Here it is:

    Code:
    function bounds()
    {
    
    	info = document.getElementById("post");
    	msg = info.value;
    
    	if(document.selection)
    	{
    		if(!sel)
    		{
    			sel = document.selection.createRange();
    		}
    
    		var temp = sel.text.length;
    
    		while(info.value.indexOf(sel.text) > 0)
    		{
    			sel.moveStart("character", -1);
    		}
    
    		start = parseInt(sel.text.length - temp);
    		end = parseInt(sel.text.length);
    
    		if(start == 0 && end == 0)
    		{
    			info.focus();
    			sel = document.selection.createRange();
    		}
    	}
    	else
    	{
    		start = info.selectionStart;
    		end = info.selectionEnd;
    	}
    
    }
    I just pasted the whole function in there, so you can see what mozilla can do in 2 lines (is this understandable with any other browsers... safari, opera, etc? I haven't actually tested on those) takes IE quite a bit more to do.

    So what happens is when there is actually some text selected, this method works fine. But when, instead, nothing is selected, the range behaves instead like an insertion point, so I can do something like sel = "stuff to insert"; and insert text where the cursor is in the textarea. This has been okay so far, but now I am trying to implement something where I actually need to know what the value of the point is (ie. what I would get in mozilla if I just found out what the selectionStart value is). Does anybody have any suggestions of a way to modify the code or maybe just scrap it altogether to do this? Been trying a few things but to no avail.

    Thanks,
    Douglas

  2. #2
    Join Date
    Dec 2004
    Posts
    8,637
    IE TextRange objects are pixel-oriented -- not character oriented. That is why you're having more trouble with IE. I'm sure the following is more code than you'd like, but it is my shot at a reliable method to obtain the desired information:
    (PHP bounding tags only for coloring of this JavaScript code.)
    PHP Code:
    function ShowCaretPosition() {
        
    this.form.cType.value document.selection.type;
        var 
    bookmark document.selection.createRange().getBookmark();
        
    this.selection this.createTextRange();  // create in textarea object and
        
    this.selection.moveToBookmark(bookmark);  // match to document.selection
        
    this.selectLeft this.createTextRange(); // create textrange object
        
    this.selectLeft.collapse(true);           // for left amount of textarea &
        
    this.selectLeft.setEndPoint("EndToStart"this.selection); // align them
        
    this.form.cStart.value this.selectLeft.text.length 1;
        
    this.form.cEnd.value this.selectLeft.text.length +
            ((
    this.selection.text.length == 0) ? this.selection.text.length);
        return 
    true;
    }
    window.onload = function() {
        var 
    obj document.forms["myForm"].elements["myTextarea"];
        
    obj.onmouseup ShowCaretPosition;
        
    obj.onkeyup ShowCaretPosition;
        return 
    true;


  3. #3
    Join Date
    Jul 2003
    Posts
    259
    So,

    This seems like a good way to get the job done, but I'm not too sure. I implemented your code, with a few tweaks for variable names and such, and I'm having the same kind of problem. It works fine when there really is a selection, but when the cursor is just somewhere in the textarea with nothing actually selected it can't find the value of its position.

    I thought maybe this would work:

    PHP Code:
    function testSelection()
    {
        
    info document.getElementById("post"); // this refers to my textarea
        
    msg info.value;

        var 
    left info.createTextRange();
        
    left.setEndPoint("EndToStart"sel); 

    /*
    sel refers to document.selection.createRange()... this was initialized in a previous function and testing shows that before this line runs sel has already been assigned

    Also if I replace it with just document.selection it still has an error here
    */

        
    start left.text.length 1;
        
    end start info.selection.text.length;

        
    alert("Start = " start); // this was just for testing

    But, of course, it doesn't.

    Do you see anything wrong with it???? I get an error at this line left.setEndPoint("EndToStart", sel);.

    Does this make sense? What do you think?

    Douglas
    Last edited by DJRobThaMan; 06-25-2006 at 10:27 PM.

  4. #4
    Join Date
    Dec 2004
    Posts
    8,637
    Quote Originally Posted by DJRobThaMan
    It works fine when there really is a selection, but when the cursor is just somewhere in the textarea with nothing actually selected it can't find the value of its position.
    Mine works fine even when there is no selection -- just a caret position:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Edit Caret Position</title>
    <script type="text/javascript">
    <!--//
    function ShowCaretPosition() {
    	this.form.cType.value = document.selection.type;
    	var bookmark = document.selection.createRange().getBookmark();
    	this.selection = this.createTextRange();  // create in textarea object and
    	this.selection.moveToBookmark(bookmark);  // match to document.selection
    	this.selectLeft = this.createTextRange(); // create textrange object
    	this.selectLeft.collapse(true);           // for left amount of textarea &
    	this.selectLeft.setEndPoint("EndToStart", this.selection); // align them
    	this.form.cStart.value = this.selectLeft.text.length + 1;
    	this.form.cEnd.value = this.selectLeft.text.length +
    		((this.selection.text.length == 0) ? 1 : this.selection.text.length);
    	return true;
    }
    window.onload = function() {
    	var obj = document.forms["myForm"].elements["ctlText"];
    	obj.onmouseup = ShowCaretPosition;
    	obj.onkeyup = ShowCaretPosition;
    	return true;
    }
    //-->
    </script>
    </head>
    
    <body>
    <form name="myForm">
      <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
        <tr>
          <td align="center">Caret Start:&nbsp;<input type="text" name="cStart" size="8"></td>
          <td align="center">End:&nbsp;<input type="text" name="cEnd" size="8"></td>
          <td align="center">Type:&nbsp;<input type="text" name="cType" size="8"></td>
        </tr>
        <tr>
          <td colspan="3">
            <textarea rows="5" name="ctlText" cols="50">Now is the time for all young men to come to the aid of their country.  Now is the time for all young men to come to the aid of their country.  Now is the time for all young men to come to the aid of their country.</textarea>
          </td>
        </tr>
      </table>
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles