Hi,
I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.
When tab is pressed in the second input box I want focus to move
to the first. It does this in IE, but not Mozilla 1.7.10. I
can make it work in Mozilla by changing the event from onkeydown
to onkeypress, but then it doesn't work in IE. Is there any
way to make this work generally without having to make the
inline event type dependent on the browser type?
Thanks.
<html>
<head>
<title>
Test Tabs
</title>
<script type="text/javascript">
function check_tab(e) {
if (e.keyCode == 9 ) {
document.getElementById('i1').focus();
e.returnValue = false; // for IE
if (e.preventDefault) e.preventDefault(); // for Mozilla
}
}
</script>
</head>
<body>
<input type="text" id="i1"/>
<br/>
<input type="text" id="i2" onkeydown="check_tab(event)"/>
<br/>
<button type="button">Button</button>
</body>
</html>
22  26816 
Mark Reginald James said the following on 9/24/2005 2:28 PM: Hi,
I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.
Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.
If you want to change the tab order, set the tabindex.
<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >
Problem solved.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Randy Webb wrote: Mark Reginald James said the following on 9/24/2005 2:28 PM:
Hi,
I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.
Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.
If you want to change the tab order, set the tabindex.
<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >
Problem solved.
Thanks Randy, but I don't think I can do that easily, if at all.
What I'm really doing is inserting a new text box when focus
is lost on the bottom text box of a set and the contents of
the box is non-blank. If focus is lost by clicking on
another element, then move the focus there. But if tab is
pressed, focus should move to the new box.
It would be quite complicated to dynamically set the tabindices,
and I'm not even sure whether browers will immediately take
into account the tabindex of the newly-created box.
The code I gave works, it's just browser-dependent. I don't
know why onkeydown and onkeypress have different tab-related
behaviour in Mozilla.
I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.
Not sure what I did, but now tab triggers the
onkeydown event, creating the new box, then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.
Hope someone finds this helpful.
Mark Reginald James a écrit : Hi,
I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.
No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur
demo :
<html><head><title>Test Tabs</title>
<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">Button</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(document.getElementById('i_b3')){focu s();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focu s();select();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">Button</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.getElementById(field))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">Button</button>
<hr></body>
</html>
--
Stephane Moriaux et son [moins] vieux Mac
Mark Reginald James a écrit : I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.
Not sure what I did, but now tab triggers the
onkeydown event, creating the new box,
Now we have creation of a new text-field on the fly ?
then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.
do not undertsand ... onblur without keydown
how make you that working ?
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.
onblur would have to be enough ... no?
Hope someone finds this helpful.
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: Now we have creation of a new text-field on the fly ?
Yes, for my original post I tried to boil the problem
down to the simplest code that demonstrated the problem,
but it turns out easier to automatically move to a newly
created box rather than to a specific existing box.
then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.
do not undertsand ... onblur without keydown
how make you that working ?
Sorry ASM, I also do not understand what you are saying.
The idea is to allow a user to create a list of
text boxes which may represent something like a list
of responses to a question. Initially there is only
one text box. But as soon as the user leaves that
box with non-blank content, a new box in the list
is automatically created. If they leave the box by
clicking elsewhere, the new box is created, but focus
is now where they clicked. But if they leave the box
by pressing tab, I not only wanted the new box created,
but also that focus move to the new box. In this way
the user can create a list of options of any length
just by typing them and tabbing to a new one.
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.
onblur would have to be enough ... no?
I don't think I'd properly tried onblur on its own,
but tried just now and found it didn't work. Tab
takes you to the box that was originally next in
sequence, skipping the new box.
I can post the code if anyone would like to see it.
ASM wrote: Mark Reginald James a écrit :
Hi,
I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.
No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur
demo :
<html><head><title>Test Tabs</title>
<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">Button</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(document.getElementById('i_b3')){focu s();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focu s();select();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">Button</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.getElementById(field))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">Button</button>
<hr></body>
</html>
Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.
I'll keep your solution in mind if I ever want to dynamically
change the tab order of an existing set of boxes. Thanks again
for taking a look at my problem.
Mark Reginald James a écrit :
Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.
if it is not too late :
absolutly not !
<html>
<script type="text/javascript">
var ind= 0;
function jump(field) {
if(document.getElementById(field))
with(document.getElementById(field))
{
focus();
select();
}
else {
ind++;
var I = document.createElement('INPUT');
I.id = 'i_n'+ind;
I.size = 5;
I.onblur = function() { jump('new'); }
document.forms[0].appendChild(I);
jump('i_n'+ind);
}
}
</script>
<form>
<p>input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>first input : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
<button type="button">Button</button>
</form>
<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
u { color: blue }
</style>
</html>
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: if it is not too late :
No, thanks Stephane for having another look.
absolutly not !
...
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
...
I fixed the typo for onblur on this line and tried it out. It worked
in IE, but in Mozilla 1.7.10 the new box was created but focus moved
to the browser window address box rather than to the new box. I
don't know if this is a Mozilla bug, for which you have to use the
onkeydown/onblur method as a work-around.
Mark Reginald James a écrit : ASM wrote:
if it is not too late :
No, thanks Stephane for having another look.
absolutly not !
...
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
...
I fixed the typo for onblur on this line
:-)
and tried it out. It worked
in IE, but in Mozilla 1.7.10 the new box was created but focus moved
to the browser window address box rather than to the new box.
Ha ?
it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)
But you're right it seems (FF) that location bar flashes while
new input and its jumping fire
A litte timer on end of function would probably fix the trouble
document.forms[0].appendChild(I);
setTimeout('jump('+I.id+')',500);
}
}
tell me back
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)
But you're right it seems (FF) that location bar flashes while
new input and its jumping fire
A litte timer on end of function would probably fix the trouble
document.forms[0].appendChild(I);
setTimeout('jump('+I.id+')',500);
}
}
I just downloaded FF 1.07 and 1.5b1 to try them out, and they
do the same as Mozilla 1.7. Tabbing from the "last input" box
goes to the new box, but tabbing from any new box goes to and
stays in the address bar. The first one probably works because
the button is interposed.
Note that I only want the auto-create to be active on
the last box. I do this by calling "delete box.onblur"
and "delete box.onkeydown" on boxes as they are left.
I found that you have to use delete rather than setting
onblur and onkeydown to null, otherwise Mozilla has trouble.
Doing this may also fix the Safari problem.
Mark Reginald James a écrit : ASM wrote:
it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)
I just downloaded FF 1.07 and 1.5b1 to try them out, and they
do the same as Mozilla 1.7. Tabbing from the "last input" box
goes to the new box, but tabbing from any new box goes to and
stays in the address bar. The first one probably works because
the button is interposed.
hu ... the button is to decorate ....
and ... you're right, it was too beautyfull, I also begin to get
problems and troubles
Have you your way of doing I'll can see somewhere?
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: Have you your way of doing I'll can see somewhere?
Here: http://mrj.bpa.nu/testtab.html
Source for this is:
<html>
<head>
<title>
Test of auto list form creation with tabbing
</title>
<script type="text/javascript">
function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
o.parentNode.parentNode.appendChild( new_option );
return new_option;
} else
return null;
}
function check_tab(e) {
if (e.keyCode == 9) {
var me = e.target ? e.target : e.srcElement;
if (check_option_change(me) != null) me.didtab = true;
}
}
function leave_option(e) {
var me = e.target ? e.target : e.srcElement;
if (me.didtab != true) check_option_change( me );
}
</script>
</head>
<body>
<ul><li><input type="text" onblur="leave_option(event)" onkeydown="check_tab(event)"></li></ul>
</body>
</html>
Mark Reginald James a écrit : ASM wrote:
Have you your way of doing I'll can see somewhere?
Here: http://mrj.bpa.nu/testtab.html
thanks
With my IE it works only once
while with FF there is no end ? ?
Source for this is:
<html>
<head>
<title>
Test of auto list form creation with tabbing
</title>
<script type="text/javascript">
function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
if you delete onkeydown and onblur
why FF can yet use them in new inputs ?
o.parentNode.parentNode.appendChild( new_option );
return new_option;
} else
return null;
}
function check_tab(e) {
if (e.keyCode == 9) {
var me = e.target ? e.target : e.srcElement;
if (check_option_change(me) != null) me.didtab = true;
}
}
function leave_option(e) {
var me = e.target ? e.target : e.srcElement;
if (me.didtab != true) check_option_change( me );
}
</script>
</head>
<body>
<ul><li><input type="text" onblur="leave_option(event)"
onkeydown="check_tab(event)"></li></ul>
</body>
</html>
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: With my IE it works only once
while with FF there is no end ? ?
Yes, just checked it on IE, and it didn't work,
even though I made this example up from my real
code that does work in both IE and FF/Mozilla!
I'll find out what I did wrong and get back to you. function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
if you delete onkeydown and onblur
why FF can yet use them in new inputs ?
The delete is done after the clone.
Mark Reginald James a écrit : ASM wrote:
With my IE it works only once
while with FF there is no end ? ?
Yes, just checked it on IE, and it didn't work,
I know (or I think to know) :
during cloning IE doesn't clone javascript
probably onwhatelse have to be to re set to clone
even though I made this example up from my real
code that does work in both IE and FF/Mozilla!
so yon know how to do ? var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
if you delete onkeydown and onblur
why FF can yet use them in new inputs ?
The delete is done after the clone.
I've once more not correctly read :(
It's on old input you delete onwhatelse
and not those of new_option ... as I thought
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: I know (or I think to know) :
during cloning IE doesn't clone javascript
probably onwhatelse have to be to re set to clone
No, the cloning is OK. Turns out you *do* have to
null out the event functions rather than delete
them, otherwise IE has trouble.
After changing the deletes to null assigns, http://mrj.bpa.nu/testtab.html now works on both IE and FF.
Mark Reginald James a écrit :
After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
not more
jump create only once
--
Stephane Moriaux et son [moins] vieux Mac
Mark Reginald James a écrit :
After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
my IE (5.2) -> not more
create jump : only once
--
Stephane Moriaux et son [moins] vieux Mac
ASM wrote: Mark Reginald James a écrit :
After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
my IE (5.2) -> not more
create jump : only once
Oh, OK. I'm testing on WinXP IE6. Are you making
sure the box is non-blank before tabbing out?
ASM wrote: Mark Reginald James a écrit :
After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
my IE (5.2) -> not more
create jump : only once
I think the problem is that if the event functions for the box
are set to null in the check_option_change function, older IE
has a problem returning from this function and finding its way
back to an event function that is no longer linked to the object.
So I've done another version with the nulling of the event
functions done back in the functions themselves: http://mrj.bpa.nu/testtab2.html
Could you check whether this works in IE 5.2?
If this doesn't work, a delayed nulling of the functions
would have to be done: either within a later-acting trigger,
or after a delay.
Mark Reginald James a écrit : ASM wrote:
Mark Reginald James a écrit : After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
my IE (5.2) -> not more
create jump : only once
Oh, OK. I'm testing on WinXP IE6. Are you making
sure the box is non-blank before tabbing out?
Re and re verified : yes
scripting :
function check_tab(e) {
window.status='keydown : vu ==> '+e.keyCode;
showes me, as I said, this stupidous IE (5.2 Mac)
forget to clone the onwhatyouwant !
as no more message in status bar with new input
--
Stephane Moriaux et son [moins] vieux Mac This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Mainard |
last post by:
Hi, all
First off I know alittle about javascript, but i have never worked with
controlling froms with it be for i wonder can some help me?
for example:I have this <textarea name"write1">Write...
|
by: Mark C. Neustadt |
last post by:
Okay, okay... from what I can find, I'm gonna be out of luck. I also
understand that it *shouldn't* matter but it does. I'm trying to send
some XML to Amazon and they're requiring the nodes to be...
|
by: Chris Rumsey via .NET 247 |
last post by:
I want to be able to control the order error messages appear in the validation summary. They always seem to appear in reverse order ie not in the same order that the validation controls appear on the...
|
by: Rob Vermeulen |
last post by:
Hi folks,
Please forgive my ignorance but I need to know if it is possible to control
ActiveX components on my website from within my serverside C# code.
I'm quite an experienced s/w developer...
|
by: Robert |
last post by:
I haven't found anything at google sa i post here, hoping someone will help
me
I have written sth like this:
document.form.inputfield.value += 'aaa'
document.form.inputfield.focus()
these...
|
by: Coleen |
last post by:
I guess I didn't make my problem clear enough, or maybe there is no better
way to do this...
I have an ASP.Net (1.0 at the moment but we are upgrading to 2.0 using
VB.net as the codebehind) web...
|
by: Phil Galey |
last post by:
I'm using XMLSerializer in VB.NET to serialize class-based objects to XML.
It's serializing fine, except that I don't seem to have control over the
order in which the various fields (properties) of...
|
by: Herb |
last post by:
I've found how to use javascript to embed a Windows Media Player in a web
page. How do I go about controlling the player in response to user input?
There should be calls to start, stop and also...
|
by: trbjr |
last post by:
My client-side application works reliably and as intended in Firefox, but not in IE6. The problem seems to be that I do not have control over the page stack in IE, while I do in Firefox. So far I...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
