moving text cursor in textarea box. [Archive]

Click to See Complete Forum and Search --> : moving text cursor in textarea box.

bjnst6

October 5th, 2002, 03:19 PM

hello again...

i have a page that dynamically loads content into a textarea from a database. after i load the content and call textareaname.focus() however, it positions the cursor at the end of the text. how do i position it back at the beginning of the text?

thanks,
b

websmith99

October 7th, 2002, 03:29 PM

You could invoke the "home" key through JavaScript. It is key code 36.

Note that this will not work on NN4.x for Windows. On Windows, it will work on IE4+ and NN6+

bjnst6

October 7th, 2002, 06:53 PM

websmith99,

thanks for the info. i've looked through the javascript documentation i have though, and i can't find how to set a keycode. is there a specific method to invoke or property to set?

thanks again,
b

Waldo2k2

October 7th, 2002, 10:48 PM

look into the fireEvent() function. I'd give you an example, but i'm not 100% sure on how to use it...my documentation is a little shady on it. But i'm almost positive that's what you'll use, i do know that you can emulate the onkeydown or up or press (etc.) and use one of those methods to simulate the home key being pressed.

websmith99

October 8th, 2002, 03:45 PM

Hmmm...

I have been able to invoke certain keys once a keypress event has occured, but have yet to succeed in generating a keypress (keydown, keyup, etc) using fireEvent(). Maybe there is a security restriction I'm not aware about.

In this sample code, try typing any letter into the input field on the right. No matter what letter key you hit, it will insert the letter "A" instead.

Using the same principle of assigning a keycode to the event, I tried to do the same thing and pass it as a parameter to fireEvent() method. In this case, the textarea starts with a value of "hmmm..." and I want to invoke the home key and add it to the value of the textarea. So far, the fireEvent() is only returning true, rather than the keystroke itself. So the textarea now has a value of "truehmmm...".

Another unresolved issue is that under certain circumstances the home key has a keycode of 36, and under others keycode 36 is the $.

<html>
<head>
<title> new document </title>
<script>
function sendHome() {
document.myform.foo.value = "hmmm...";
document.myform.foo.focus();
var evtObj = document.createEventObject();

evtObj.keyCode = 36;

document.myform.foo.value = document.myform.foo.fireEvent("onkeydown",evtObj) + document.myform.foo.value;
//event.cancelBubble = true;
}

function checkField(evnt, keyType, sPrompt) {
var nKey;
if (document.all)
nKey = evnt.keyCode;
else
nKey = evnt.which;
if (keyType == "numerical") {
if (((nKey < 48) || (nKey > 57)) && (nKey != 8)){
evnt.keyCode = 65;
return true;
}
} else if (keyType == "alphabetical") {
if ((nKey < 65) || (nKey > 90)) {
if (((nKey < 97) || (nKey > 122)) && (nKey != 8)) {
return false;
}
}
}
}

</script>
</head>
<body onload="sendHome()">
<form name="myform">
<textarea name="foo"></textarea>
<input type="text" name="rownumber" size="3" maxlength="3" class="monospace" onKeyPress="return checkField(event, 'numerical', '')" value="1">
</form>
</body>
</html>

Waldo2k2

October 8th, 2002, 05:32 PM

I've got some working code for you to learn from...i decided i'd take the time to look into the fireEvent function...
both pages are bug free


<html>
<head>
<style type="text/css">
#myspan {font-style:italic}
</style>
<script language="Javascript">
// assemble a couple event object properties
function getEventProps()
{
var msg = "";
var elem = event.srcElement;
msg += "event.srcElement.tagname: " + elem.tagname + "\n";
msg += "event.srcElement.id: " + elem.id + "\n";
msg += "event button: " + event.button;
return msg;
}

// onClick event handlers for body, myP, and myspan
function bodyClick()
{
var msg = "Click event processed in body\n\n";
msg += getEventProps();
alert(msg);
checkCancelBubble();
}
function pClick()
{
var msg = "Click event processed in P\n\n";
msg += getEventProps();
alert(msg);
checkCancelBubble();
}
function spanClick()
{
var msg = "Click event processed in span\n\n";
msg += getEventProps();
alert(msg);
checkCancelBubble();
}

// cancel event bubbling if checkbox is checked
function checkCancelBubble()
{
event.cancelBubble = document.controls.bubbleOn.checked;
}

// assign onClick event handlers to three elements
function init()
{
document.body.onclick = bodyClick;
document.all.myP.onclick = pClick;
document.all.myspan.onclick = spanClick;
}

// invoke fireEvent() on object whose id is passed as parameter
function doFire(objid)
{
var newEvt = document.createEventObject();
newEvt.button = 3;
document.all(objid).fireEvent("onclick", newEvt);
// don't let button clicks bubble
event.cancelBubble = true;
}
</script>
</head>
<body id="mybody" onLoad="init()" bgcolor="black">
<h1 style="color:'white';">fireEvent() Method</h1>
<hr>
<p id="myP" style="color:'white';">This is a paragraph <span id="myspan">(with a nested span)</span> that receives click events.</span></p>
<hr>
<p style="color:'white';"><b>Control Panel</b></p>
<form name="controls">
<p style="color:'white';"><input type="checkbox" name="bubbleOn" onClick="event.cancelBubble=true">Cancel event bubbling.</p>
<p><input type="button" value="Fire Click Event on body" onClick="doFire('mybody')"></p>
<p><input type="button" value="Fire Click Event on myP" onClick="doFire('myP')"></p>
<p><input type="button" value="Fire Click Event on myspan" onClick="doFire('myspan')"></p>
</form>
</body>
</html>


<html>
<head>
<style type="text/css">
#mySPAN {font-style:italic}
</style>
<script language="JavaScript">
// assemble a couple event object properties
function getEventProps(evt)
{
var msg = "";
var elem = evt.target;
msg += "event.target.nodeName: " + elem.nodeName + "\n";
msg += "event.target.parentNode: " + elem.parentNode.id + "\n";
msg += "event button: " + evt.button;
return msg;
}

// onClick event handlers for body, myP, and mySPAN
function bodyClick(evt)
{
var msg = "Click event processed in BODY\n\n";
msg += getEventProps(evt);
alert(msg);
checkCancelBubble(evt);
}
function pClick(evt)
{
var msg = "Click event processed in P\n\n";
msg += getEventProps(evt);
alert(msg);
checkCancelBubble(evt);
}
function spanClick(evt)
{
var msg = "Click event processed in SPAN\n\n";
msg += getEventProps(evt);
alert(msg);
checkCancelBubble(evt);
}

// cancel event bubbling if checkbox is checked
function checkCancelBubble(evt)
{
if (document.controls.bubbleOn.checked) {
evt.stopPropagation();
}
}

// assign onClick event handlers to three elements
function init()
{
document.body.onclick = bodyClick;
document.getElementByid("myP").onclick = pClick;
document.getElementByid("mySPAN").onclick = spanClick;
}

// invoke fireEvent() on object whose id is passed as parameter
function doDispatch(objid, evt)
{
var newEvt = document.createEvent("MouseEvent");
newEvt.button = 3;
document.getElementByid(objid).dispatchEvent(newEvt);
// don't let button clicks bubble
evt.stopPropagation();
}
</script>
</head>
<body id="myBODY" onLoad="init()" bgcolor="black">
<font color="white">
<h1>fireEvent() Method</h1>
<hr>
<p id="myP">This is a paragraph <span id="mySPAN">(with a nested SPAN)</span> that receives click events.</span></p>
<hr>
<p><b>Control Panel</b></p>
<form name="controls">
<p><input type="checkbox" name="bubbleOn" onClick="event.stopPropagation()">Cancel event bubbling.</p>
<p><input type="button" value="Fire Click Event on BODY" onClick="doDispatch('myBODY', event)"></p>
<p><input type="button" value="Fire Click Event on myP" onClick="doDispatch('myP', event)"></p>
<p><input type="button" value="Fire Click Event on mySPAN" onClick="doDispatch('mySPAN', event)"></p>
</form>
</font>
</body>
</html>

good luck