Prev: Strange JavaScript Behavior
Next: passing a variable
From: Captain Dondo on 20 Jan 2006 14:11
I need to create a table where each element has certain specific properties.

For example, elements in the first column should always have a range of
0-100, and increment by 1. Elements in column 2 might have a range of
0-360, and increment by 0.1. Altogether there might be 8 elements in
each row.

Since this is basically the same javascript function over and over, I
wonder if there is a way to create some <input> element that might
contain this knowledge in a way that javascript can access it.

For example, could I have

<input type="text" class="percent" onkeypress="javascript:blah(event)">

where the javascript function could retrieve the class value?

Since this is going to be fairly complex, I'd like to make it fairly
self-documenting and simple. It's much easier for a maintainer to
understand class="precent" than "javascript:blah(0,100,1,event)",
especially since I am also going to have to pass navigation information
(is this a border element in the table? what are my neighbors? kind
of information... - so that the actual information might end up being
javascript:blah(0,100,1,5,21,16,18,0,1,0,0,event) to denote the data
type, the 4 neighbors, and the 4 border conditions....


From: VK on 20 Jan 2006 15:26

Captain Dondo wrote:
> I need to create a table where each element has certain specific properties.
>
> For example, elements in the first column should always have a range of
> 0-100, and increment by 1. Elements in column 2 might have a range of
> 0-360, and increment by 0.1. Altogether there might be 8 elements in
> each row.
>
> Since this is basically the same javascript function over and over, I
> wonder if there is a way to create some <input> element that might
> contain this knowledge in a way that javascript can access it.
>
> For example, could I have
>
> <input type="text" class="percent" onkeypress="javascript:blah(event)">
>
> where the javascript function could retrieve the class value?

Yes, you can. Though DOM doesn't provide a native method like
getElementsByClassName, but you can write one or use any of already
written of this kind. Also if it's given what you are working only with
inputs within one form, then the task even more simple:

<input type="text" class="percent" onkeypress="blah(event)">
(please note that event handler is not a link, so javascript:
pseudo-protocol is out of business here)
....
var elm = document.form['myForm'].elements;
var len = elm.length;
for (var i=0; i<len; i++) {
switch (elm[i].className) {
case 'percent' :
// your action
break;
case 'degree':
// your action
break;
default:
// no match
}
}
....
you can apply several classes to one element to make the system as
complicated as you want:
<input type="text" class="percent mandatory " onkeypress="blah(event)">
<input type="text" class="integer positive mandatory"
onkeypress="blah(event)">
<input type="text" class="integer positive optional"
onkeypress="blah(event)">
etc.

From: Captain Dondo on 20 Jan 2006 16:14
VK wrote:

> Yes, you can. Though DOM doesn't provide a native method like
> getElementsByClassName, but you can write one or use any of already
> written of this kind. Also if it's given what you are working only with
> inputs within one form, then the task even more simple:
>
> <input type="text" class="percent" onkeypress="blah(event)">
> (please note that event handler is not a link, so javascript:
> pseudo-protocol is out of business here)

OK, noted. I am a javascript newbie....

> ...
> var elm = document.form['myForm'].elements;
> var len = elm.length;
> for (var i=0; i<len; i++) {
> switch (elm[i].className) {
> case 'percent' :
> // your action
> break;
> case 'degree':
> // your action
> break;
> default:
> // no match
> }
> }
> ...
> you can apply several classes to one element to make the system as
> complicated as you want:
> <input type="text" class="percent mandatory " onkeypress="blah(event)">
> <input type="text" class="integer positive mandatory"
> onkeypress="blah(event)">
> <input type="text" class="integer positive optional"
> onkeypress="blah(event)">
> etc.
>

Very cool.... So I should be able to retrieve taborder values as well
using this method... And perhaps store general data like # of rows and
columns in a hidden element, so then I can derive most of my nav info....

Thanks,

--Yan
From: VK on 20 Jan 2006 16:26

Captain Dondo wrote:
> So I should be able to retrieve taborder values as well
> using this method...

For elements taborder there is native attribute "tabindex", and all
modern browsers (at least all you need to care about, including IE and
FF) respect this attribute:

<input type="text" name="t1" tabindex="1">
<input type="text" name="t2" tabindex="3">
<input type="text" name="t3" tabindex="2">
<input type="text" name="t4" tabindex="-1">

On tab press focus goes from t1 to t3, and only then to t2. The
negative value I used only on IE and it does what promised: such
element is excluded from taborder so requires an explicit mouse click
for focus.

Of course you need to use it only if you need to i) change the default
taborder or ii) exclude some elements from taborder.

And of course you can not only set tabindex but also read it:
var ti = someElement.tabIndex;

 | 
Pages: 1
Prev: Strange JavaScript Behavior
Next: passing a variable