By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,688 Members | 1,900 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,688 IT Pros & Developers. It's quick & easy.

INPUT Events in a class.

P: n/a
Hi I am trying to create a Javascript class, and have this class handle
events for an INPUT control such as "onkeydown"

I can get this to work using the code below, but my question is how do I get
a reference back to my class from within the KeyDown event, since this is
triggered outside of my class.

I create 2 new instances of my class which is suppose to handle two input
boxes. I then setup the onkeydown event for one of the input controls. From
within this onkeydown event I find the control name that initialized the
event, and then I search my array of classes to find the correct class that
should be processing this event.

Is this the only way to handle this situation? or is there a better method?

<body>

<form method="POST" action="x">
<p>
<input type="text" name="LookupEditControl_Country" size="20" value="New
Zealand">&nbsp;
<input type="text" name="LookupEditControl_Country_Value" size="20"
value="64"><br><br>
<input type="text" name="LookupEditControl_Name" size="20"
value="chris">&nbsp;
<input type="text" name="LookupEditControl_Name_Value" size="20"
value="1234"><br><br>
<input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>

<SCRIPT language="javascript">

function LookupEditControl(EditControl, Columns)
{
this.Name = EditControl;
this.EditControl = document.getElementById(EditControl);

if (this.EditControl.createTextRange)
this.EditControl.onkeydown=new Function("return KeyDown(event);");
else
this.EditControl.onkeydown=KeyDown;
this.ValueControl = document.getElementById(EditControl+"_Value");
this.Columns = Columns;
}

function KeyDown(e)
{
var targ;
if (!e)
var e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

var x = GetEditControlFromTagName(targ.name);
alert(x.Columns);
}

function GetEditControlFromTagName(TagName)
{
for (var index=0; index < EditControls.length; index++)
{
if (EditControls[index].Name == TagName)
return EditControls[index];
}
return null;
}
function SetInput(value)
{
this.EditControl.value = value;
}

function GetInput()
{
return this.EditControl.value;
}

LookupEditControl.prototype.SetInput = SetInput;
LookupEditControl.prototype.GetInput = GetInput;

var EditControls = new Array(
new LookupEditControl("LookupEditControl_Country",3),
new LookupEditControl("LookupEditControl_Name", 5));

//alert(EditControls[0].GetInput());
//alert(EditControls[1].GetInput());

</SCRIPT>
</body>

--

Cheers

Chris

http://blog.crowe.co.nz
Aug 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Chris Crowe wrote:
Hi I am trying to create a Javascript class, and have this class handle
events for an INPUT control such as "onkeydown"


This is how I do something like that:

<button id="btn1">Simple Event Handling</button>
<script type="text/javascript">
var obj = new MyObject();
document.getElementById("btn1").onclick = obj.events.advancedClickHandler;
</script>
function MyObject()
{
this.value = "Hello!";
this.events = new MyEvents(this.value);
}

function MyEvents(value)
{
this.value = value;
this.advancedClickHandler = this.createAdvancedClickHandler(value);
}

MyEvents.prototype.createAdvancedClickHandler =
_MyEvents_createAdvancedClickHandler;
MyEvents.advancedClickHandler = _MyEvents_advancedClickHandler;

function _MyEvents_createAdvancedClickHandler(value)
{
return function(event)
{
MyEvents.advancedClickHandler(event || window.event, value);
}
}

function _MyEvents_advancedClickHandler(event, value)
{
alert("value: "+value);
}
Aug 23 '05 #2

P: n/a
Thanks Robert - I will give it a go.
Cheers

Chris

Chris Crowe [IIS MVP]
http://blog.crowe.co.nz

"Robert" <ro*@secret.xyz> wrote in message
news:43***********************@news.xs4all.nl...
Chris Crowe wrote:
Hi I am trying to create a Javascript class, and have this class handle
events for an INPUT control such as "onkeydown"


This is how I do something like that:

<button id="btn1">Simple Event Handling</button>
<script type="text/javascript">
var obj = new MyObject();
document.getElementById("btn1").onclick = obj.events.advancedClickHandler;
</script>
function MyObject()
{
this.value = "Hello!";
this.events = new MyEvents(this.value);
}

function MyEvents(value)
{
this.value = value;
this.advancedClickHandler = this.createAdvancedClickHandler(value);
}

MyEvents.prototype.createAdvancedClickHandler =
_MyEvents_createAdvancedClickHandler;
MyEvents.advancedClickHandler = _MyEvents_advancedClickHandler;

function _MyEvents_createAdvancedClickHandler(value)
{
return function(event)
{
MyEvents.advancedClickHandler(event || window.event, value);
}
}

function _MyEvents_advancedClickHandler(event, value)
{
alert("value: "+value);
}

Aug 24 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.