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

This site is best viewed in a modern browser with JavaScript enabled.

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

DJRobThaMan

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:

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

phpnovice

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.)

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["myTextarea"];
	obj.onmouseup = ShowCaretPosition;
	obj.onkeyup = ShowCaretPosition;
	return true;
}

DJRobThaMan

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:

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

phpnovice

DJRobThaMan wrote:
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:

<!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>