another newbie question focus()

P

please-answer-here

Why doesn't this script works?

I've tried different variant with focus 2 fields ahead or back which works
fine. But when I try to focus on the field I've just left I'm unable to
"refocus" on that field. My guess is that the combination of onchange and
focus() causes the problem, but I haven't got the big experience and
knowledge to wheter my assumption is right or if I just made a big blunder
somewhere.

Again I'll hope that someone could spare a few minutes in increasing my
(little) knowledge in javascript and DOM


<html>
<head>
<title>just a silly little test</title>
<script>
function validate(that) {
var xid=that.id;
var yid=that.form.id;
var xantelm=that.form.elements.length;
for (i=0;i<xantelm;i++) {
if (document.forms[yid].elements.id == xid) {
if (that.value.length!=3) {
alert('Exactly 3 characters are needed');
document.forms[yid].elements.focus();
}
}
}
return true;
}

</script>
</head>
<body>
<form id="forma" action="sletmig.asp" method="post">
<input id="fielda" type="text" onchange="validate(this);">
<input id="fieldb" type="text" onchange="validate(this);">
<input id="fieldc" type="text" onchange="validate(this);">
</form>
</body>
 
W

web.dev

Hi,

I've tried the following in IE and it works. Change your javascript to
be like so:

<script type = "text/javascript">
function validate(that)
{
if(that.value.length != 3)
{
alert("3 chars needed");
that.focus();
}
}
</script>

Your other checks aren't necessary. Your current <input> element
passes to the function "this". And that's all your function needs to
know for what you want to do. The moment you try to do this bit of
code:

.... that.form ...

Won't work, simply because the <input> element doesn't have the form
property. However, document.forms[x] would make more sense. I hope
this clarifies.

:)
 
P

please-answer-here

web.dev said:
Hi,

I've tried the following in IE and it works. Change your javascript
to be like so:
Click to expand...

Don't work (at least in my environment)
<script type = "text/javascript">
function validate(that)
{
if(that.value.length != 3)
{
alert("3 chars needed");
that.focus();
}
}
</script>

Your other checks aren't necessary. Your current <input> element
passes to the function "this". And that's all your function needs to
know for what you want to do. The moment you try to do this bit of
code:

... that.form ...

Won't work, simply because the <input> element doesn't have the form
property.
Click to expand...

But It actually works without any problems when focusing on i+1 or i-1
(exept of course when out of range)
, and that.form.id is just the id of the form

However, document.forms[x] would make more sense. I hope
 
D

Dave

I think you're being bitten by an order of operations problem. The
hitting the tab key causes the onchange event to fire first before the
tab key is actually acted on. In your handling of the onchange event
you change the focus.

When the event returns, the tab is dealt with, moving the focus down the
tab order, and overwriting your setting of the focus.

You need to fix it so your focus happens after the tab key is processed.

I have an updated version below that seems to work but I'd be interested
in seeing any other solutions that are offered.



<html>
<head>
<title>just a silly little test</title>
<script>
var focus_ctl;
function validate_focus(){
focus_ctl.focus();
}

function validate(that) {
focus_ctl=that;
if (that.value.length!=3) {
alert('Exactly 3 characters are needed');
setTimeout(validate_focus,50);
}
}

</script>
</head>
<body>
<form id="forma" action="sletmig.asp" method="post">
<input id="fielda" type="text" onchange="validate(this);">
<input id="fieldb" type="text" onchange="validate(this);">
<input id="fieldc" type="text" onchange="validate(this);">
</form>
</body>
 
P

please-answer-here

please-answer-here said:
Why doesn't this script works?

I've tried different variant with focus 2 fields ahead or back which
works fine. But when I try to focus on the field I've just left I'm
unable to "refocus" on that field. My guess is that the combination
of onchange and focus() causes the problem, but I haven't got the big
experience and knowledge to wheter my assumption is right or if I
just made a big blunder somewhere.

Again I'll hope that someone could spare a few minutes in increasing
my (little) knowledge in javascript and DOM
Click to expand...

Think I found a part of the solution. Apparently I need to place the focus
in a settimeout call. When using "fixed" text it works very vell , but how
do I escape/evaluate the variables in the
document.forms[yid].elements.focus(); expression when placed into the
settimeout call?
<html>
<head>
<title>just a silly little test</title>
<script>
function validate(that) {
var xid=that.id;
var yid=that.form.id;
var xantelm=that.form.elements.length;
for (i=0;i<xantelm;i++) {
if (document.forms[yid].elements.id == xid) {
if (that.value.length!=3) {
alert('Exactly 3 characters are needed');
document.forms[yid].elements.focus();
}
}
}
return true;
}

</script>
</head>
<body>
<form id="forma" action="sletmig.asp" method="post">
<input id="fielda" type="text" onchange="validate(this);">
<input id="fieldb" type="text" onchange="validate(this);">
<input id="fieldc" type="text" onchange="validate(this);">
</form>
</body>
Click to expand...
 
R

RobG

web.dev said:
Hi,

I've tried the following in IE and it works. Change your javascript to
be like so:

<script type = "text/javascript">
function validate(that)
{
if(that.value.length != 3)
{
alert("3 chars needed");
that.focus();
}
}
</script>

Your other checks aren't necessary. Your current <input> element
passes to the function "this". And that's all your function needs to
know for what you want to do. The moment you try to do this bit of
code:

... that.form ...

Won't work, simply because the <input> element doesn't have the form
property. However, document.forms[x] would make more sense. I hope
this clarifies.
Click to expand...

Yes it does. Controls have a 'form' property that is the parent form,
which is why 'this.form' works. Try it.

<form name="aForm" action="">
<input type="button" value="click me" onclick="
var x = this.form.textField;
alert(this.form.name + '\n' + x.form.name);
">
<input type="text" name="textField">
</form>
 
P

please-answer-here

Dave said:
I think you're being bitten by an order of operations problem. The
hitting the tab key causes the onchange event to fire first before the
tab key is actually acted on. In your handling of the onchange event
you change the focus.

When the event returns, the tab is dealt with, moving the focus down
the tab order, and overwriting your setting of the focus.

You need to fix it so your focus happens after the tab key is
processed.

I have an updated version below that seems to work but I'd be
interested in seeing any other solutions that are offered.
Click to expand...

I think I understand the key concepts, but how do I literally pass/assign
the actual value to the focus_ctl variable from the validate function?
 
R

RobG

please-answer-here said:
please-answer-here said:
Why doesn't this script works?

I've tried different variant with focus 2 fields ahead or back which
works fine. But when I try to focus on the field I've just left I'm
unable to "refocus" on that field. My guess is that the combination
of onchange and focus() causes the problem, but I haven't got the big
experience and knowledge to wheter my assumption is right or if I
just made a big blunder somewhere.

Again I'll hope that someone could spare a few minutes in increasing
my (little) knowledge in javascript and DOM
Click to expand...


Think I found a part of the solution. Apparently I need to place the focus
in a settimeout call. When using "fixed" text it works very vell , but how
do I escape/evaluate the variables in the
document.forms[yid].elements.focus(); expression when placed into the
settimeout call?
Click to expand...


By building them up as a string:

function validate(that) {
if (that.value.length!=3) {
alert('Exactly 3 characters are needed');
var t = "document." + that.form.name + '.' + that.id;
setTimeout( t + ".focus();", 50);
}
}

The variable 't' is not strictly necessary, but the line gets pretty
long otherwise.

The use of dot notation for accessing forms only works in IE if the
form has a matching name (it works with an ID in other Geko browsers),
so add a name to the form that matches the ID.

It may be a good idea to do the same for the form elements too.

[...]
 
R

RobG

please-answer-here said:
Dave wrote: [...]


I think I understand the key concepts, but how do I literally pass/assign
the actual value to the focus_ctl variable from the validate function?
Click to expand...

focus_ctl is being created as a global variable (it is declared inside
a function without the 'var' keyword), it holds a reference to the
element referenced by 'that'.

[...]
^^^^^---- created here without 'var'.

[...]
 
P

please-answer-here

RobG said:
please-answer-here said:
please-answer-here wrote:

Think I found a part of the solution. Apparently I need to place the
focus in a settimeout call. When using "fixed" text it works very
vell , but how do I escape/evaluate the variables in the
document.forms[yid].elements.focus(); expression when placed into
the settimeout call?
Click to expand...


By building them up as a string:

function validate(that) {
if (that.value.length!=3) {
alert('Exactly 3 characters are needed');
var t = "document." + that.form.name + '.' + that.id;
setTimeout( t + ".focus();", 50);
}
}

The variable 't' is not strictly necessary, but the line gets pretty
long otherwise.

The use of dot notation for accessing forms only works in IE if the
form has a matching name (it works with an ID in other Geko
browsers), so add a name to the form that matches the ID.

It may be a good idea to do the same for the form elements too.
Click to expand...


Thank you very much for the solution. Now it works and I'm a happy man

[...]
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

About as basic "Newbie-Question" that you can get. 3
Uhhhhh, What can I do next? 6
another newbie question - onblur / focus 9
I want to Display Excel As HTML In js 2
Image upload not working in browser 4
In javascript, XML File Create, File Save 2
Script to send email not working 1
Registration Form 7

Members online

Total: 25 (members: 1, guests: 24)
Robots: 164

Forum statistics

Threads
473,756
Messages
2,569,533
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top