Finding start and end position of selection in Internet explorer.

[joe92]

Hi. I am having huge difficulties with determining the start and end position of a selection of text in a text area in IE. Like with this forum I am trying to give the option for the user to click on a button such as 'quote' and it insert quote tags around the selected text if there is any or at the cursor postion.

 

Below is one of the buttons the user can click and the text area.

<a class="hand" id="italic" title="Make text italic" onclick="insertTag(this);"><i>italic</i></a>

<textarea name="add_post" id="newPostText" class="postReply" onclick="storeCaret(this);" onselect="storeCaret(this);"  onKeyUp="storeCaret(this);"></textarea>

 

This is the storeCaret function.

function storeCaret(textEl){
if (document.selection)
	{
		textEl.caretPos = document.selection.createRange().duplicate();
	}
}

 

And the insertTag function.

function insertTag(tg){
/*get the tag type*/
var tag = tg.id;
if(tag == 'quote')
	{
		var tagprt1 = '[quote]';
		var tagprt2 = '[/quote]';
	}
else if(tag == 'url')
	{
		var tagprt1 = '[url]';
		var tagprt2 = '[/url]';
	}
else if(tag == 'bold')
	{
		var tagprt1 = '[b]';
		var tagprt2 = '[/b]';
	}
else if(tag == 'italic')
	{
		var tagprt1 = '[i]';
		var tagprt2 = '[/i]';
	}
/*get the textarea to insert into*/
var postArea = document.getElementById('newPostText');
postArea.focus();
/*IE route*/
if(document.selection)
	{
		if(postArea.createTextRange && postArea.caretPos)
			{
				var range = document.selection.createRange();
				var range_length = range.text.length;
				var stored_range = range.duplicate();
				stored_range.moveToElementText(postArea);
				stored_range.setEndPoint('EndToEnd', range);
				postArea.selectionStart = stored_range.text.length - range_length;
				postArea.selectionEnd = postArea.selectionStart + range.text.length;
				var selection = postArea.value.substring(postArea.selectionStart, postArea.selectionEnd);
				postArea.value = postArea.value.substring(0, postArea.selectionStart) + tagprt1 + selection + tagprt2 + postArea.value.substring(postArea.selectionEnd, postArea.value.length);
			}
		else{
				alert('Please insert cursor in text area.');
			}
	}
/*good browsers route*/
else if(postArea.selectionStart || postArea.selectionStart == '0')
	{
		var len = postArea.value.length;
		var start = postArea.selectionStart;
		var end = postArea.selectionEnd;
		var selection = postArea.value.substring(start, end);
		var insertPoint = postArea.selectionStart + tagprt1.length + selection.length;
		postArea.value = postArea.value.substring(0, start) + tagprt1 + selection + tagprt2 + postArea.value.substring(end, len);
		postArea.setSelectionRange(insertPoint,insertPoint);
	}
}

 

 

I have it working perfectly in all browsers except internet explorer. I got the IE route from this article after searching all over google for what seemed like hours and edited sections to make it work with the rest of my function. But I just have no idea why it wont work? I think it has something to do with the range that is created (var range = document.selection.createRange() is always of 0 length no matter what is selected). What currently happens when the user clicks to insert the tag into the text area is it will place both the tags at the cursor position. If there is highlighted text, wherever you started the highlighting from is recognised as the cursor position. It will not place the tags around the highlighted text.

 

Does anybody know why the range is always calculated as 0? Is there a better way to calculate the start and end positions for internet explorer?

 

Any help is greatly appreciated and if there is anything that needs explaining better please tell me and I will do my best to explain it again.

Joe

[joe92]

Anyone know what to do?

[Adam]

Seems to be an issue with the anchor stealing focus (probably as it has built-in click handlers) and so loosing the selection, which means later the text range object returned from document.selection.createRange() is empty. Try using an image (as this forum does) or styled text instead. I gave it a quick try with your code and it works, though I'd remove all storeCaret() calls - I have no idea what you're trying to do there?

[joe92]

<img class="hand" src="italic.png" alt="italic" id="italic" title="Make text italic" onclick="insertTag(this);" />

 

Ahh, thank you so much Adam! This has been bugging me for a while now. Changed the <a> tags into an image and ran the function through that and it's sorted! haha. Thank you thank you