setting cursor position in text area

[NorthStarDA]

Hi,

I have built part of a web application that allows users to build scripts to handle certain functions. (skip logic for a survey). Users don't know it's javascript they're building, they build something like this:

if(Q:5 == 'a. first choice'){
goToPage(P:3);
}

i go through and replace things like Q:5 and P:3 with the proper javascript variable at the time the survey is rendered.

Point being, I have a group of buttons that insert all of these values into a text area to allow users to build these scripts without actually typing code. I need to know how to put the cursor in a certain position when a command is inserted. So when a user is adding an IF condition, i need the cursor to be in the parens so they can click the next buttons to start to build the expression.

Let me know if this is not clear and i'll explain further, but long story short- i need to add text to a textarea (not necessarily at the end) and i need to control where the cursor goes after.

thanks

=========================================
Don't sweat the petty things and don't pet the sweaty things.

 

[BillyRayPreachersSon]

What browsers does this need to work in? IE has some control over the caret position, but other browsers may not.

So... if you need it to work in more than IE, you might have to rethink your functionality.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NorthStarDA]

the application is written specifically for firefox on macintosh. will that not be possible?

=========================================
Don't sweat the petty things and don't pet the sweaty things.

 

[BillyRayPreachersSon]

Aaah - a quick search on Google for "Firefox caret control JavaScript" found this handy resource:

http://blog.vishalon.net/Post/57.aspx

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NorthStarDA]

ok this is what i have so far, the script does not appear to be returning me the current caret position, but it always returns the count of characters in the textbox:

function insertAtCursor(myField, myValue) {
	//IE support
	if (document.selection) {
	myField.focus();
	sel = document.selection.createRange();
	sel.text = myValue;
	}
	//MOZILLA/NETSCAPE support
	else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		myField.value = myField.value.substring(0, startPos)
		+ myValue
		+ myField.value.substring(endPos, myField.value.length);
	} else {
		myField.value += myValue;
	}
	
	caretPos = doGetCaretPosition(myField);
	alert(caretPos);
	setCaretPosition(myField,caretPos-3);
}

the line
caretPos = doGetCaretPosition(myField);

the line
setCaretPosition(myField,caretPos-3);
should move the cursor back 3 spots from where i just inserted text


and the 2 supporting functions

function doGetCaretPosition (ctrl) {

	var CaretPos = 0;
	// IE Support
	if (document.selection) {

		ctrl.focus ();
		var Sel = document.selection.createRange ();

		Sel.moveStart ('character', -ctrl.value.length);

		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;

	return (CaretPos);

}


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();
	}
}

=========================================
Don't sweat the petty things and don't pet the sweaty things.

 

[NorthStarDA]

actually i worked around it, i get the cursor position at the start of the insertAtCursor function, then use that as the starting point for where the cursor should go

=========================================
Don't sweat the petty things and don't pet the sweaty things.