Getting cursor-position in a textarea (IE trouble)

Goldeneye · March 19, 2011

The weirdest thing is happening. I'm using this function someone else made

getCaretPosition

which retrieves the position of the cursor in a textarea. I only use this function for IE. The problem is that the

getCaretPosition

function seems to return the length of the textarea-value. So if you have the text "abcd" in the textarea (with the cursor between the 'b' and 'c') and press the link, the result will be "ab%%%%%%cd" with the cursor set after the first 4 characters (in this case "ab%%"). The way I have the javascript set up right now, the cursor should not move.

Am I missing something?

<html>
<head>
	<script type="text/javascript">
		function insert_formatText(pre, suf, fid, eid){
			if(document.selection){ //Internet Explorer
				var str = document.selection.createRange().text;
				document.forms[fid].elements[eid].focus();
				var sel = document.selection.createRange();
				var caretPos = getCaretPosition(document.forms[fid].elements[eid]);
				sel.text = pre + str + suf;
				setCaretPosition(document.forms[fid].elements[eid], caretPos);
				return;
			} else if ((typeof document.forms[fid].elements[eid].selectionStart) != 'undefined'){ //Firefox
				var txtarea = document.forms[fid].elements[eid];
				var selLength = txtarea.textLength;
				var selStart = txtarea.selectionStart;
				var selEnd = txtarea.selectionEnd;
				var oldScrollTop = txtarea.scrollTop;
				var s1 = (txtarea.value).substring(0, selStart);
				var s2 = (txtarea.value).substring(selStart, selEnd)
				var s3 = (txtarea.value).substring(selEnd, selLength);
				txtarea.value = s1 + pre + s2 + suf + s3;
				//set the cursor in-between the pre and suf parameters
				var pos = (s1.length + pre.length);
				txtarea.focus();
				txtarea.setSelectionRange(pos, pos);
				txtarea.scrollTop = oldScrollTop;
				return;
			} else
				document.forms[fid].elements[eid].value += pre + suf;
		}
		function setCaretPosition(ctrl, pos){
			if(ctrl.setSelectionRange){
				ctrl.focus();
				ctrl.setSelectionRange(pos,pos);
			} else if (ctrl.createTextRange) {
				var range = ctrl.createTextRange();
				range.collapse(true);
				range.moveEnd('character', pos);
				range.moveStart('character', pos);
				range.select();
			}
		}

		function getCaretPosition(ctrl){
			var CaretPos = 0;
			if(document.selection){ // IE Support
				ctrl.focus ();
				var Sel = document.selection.createRange ();
				Sel.moveStart ('character', -ctrl.value.length);
				CaretPos = Sel.text.length;
			} else if (ctrl.selectionStart || ctrl.selectionStart == '0') // Firefox support
				CaretPos = ctrl.selectionStart;
			return (CaretPos);
		}
	</script>
</head>
<body>
	<form id="entryform">
		<a href="javascript:void(0);" onclick="insert_formatText('%%%', '%%%', 'entryform', 'text');">Bold</a><br />
		<textarea id="text"></textarea>
	</form>
</body>
</html>

Sign In

Getting cursor-position in a textarea (IE trouble)

Recommended Posts

Goldeneye

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information