Buttons with on click function

**jamespbyrne** · 08-07-2008, 02:58 AM

I have some buttons that add text to a text area when they are clicked. I need to know how to get the cursor to be changed one that happens. Below is an example.

If the user clicks a button the text box would add

Text_1

Text_2

I want the cursor to then be on the line in-between those lines. But i can not make the cursor position static because there could be typing bolth before and after the text that the button inserts.

If anyone has and knowledge about this or can point me to a tutorial i would really appreciate it, thanks in advance for the help.

**jscheuer1** · 08-07-2008, 04:10 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function add(el, ta, t1, t2){
var t = el.form.elements[ta], l;
t.value += '\n' + t1 + '\n';
l = t.setSelectionRange? t.value.length : t.value.replace(/\n/g, '').length;
t.value += '\n' + t2;
t.focus();
setCursorPosition(t, l, l);
}
function setCursorPosition(oInput, oStart, oEnd) {
if( oInput.setSelectionRange ) {
oInput.setSelectionRange(oStart,oEnd);
} 
else if( oInput.createTextRange ) {
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character',oEnd);
range.moveStart('character',oStart);
range.select();
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return false;">
<div>
<textarea name="bob" cols="50" rows="5">Some Stuff Here Already</textarea><br>
<input type="button" value="add" onclick="add(this, 'bob', 'Text_1', 'Text_2');">
</div>
</form>
</body>
</html>

**marlonbtx** · 08-07-2008, 11:31 PM

and how do you get the cursor position?

**jscheuer1** · 08-08-2008, 01:31 AM

Originally Posted by marlonbtx

and how do you get the cursor position?

In the above example, it is this line:

Code:

l = t.setSelectionRange? t.value.length : t.value.replace(/\n/g, '').length;

**jamespbyrne** · 08-08-2008, 04:17 AM

ok that woks right as i need it to there is just one thing that i can not figure out. I know i am a noob.

if i need to add 2 buttons, one that has the possibility of adding text inside the other how would i go about doing that. I do not know any javascript sorry.

Thanks in advance for the help.

Thread: Buttons with on click function

Thread Tools

Search Thread

Buttons with on click function

Bookmarks

Bookmarks

Posting Permissions