Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.
Course Of The Month
7 days, 1 hour left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
javascript focus
Posted on 2000-03-23
Hey all,
Need some help with this.. I would really appreciate any help in this pls..
I have a small javascript
<script language="JavaScript1.2">
if (document.layers)
document.captureEvents(Eve
function alert_keycode(){
alert(event.keyCode)
}
document.onkeypress=alert_
</script>
<HEAD>
<form>
<P>INPUT: <INPUT type="button" value = "Check "></P>
<P><input type="text"></P>
</form>
</HTML>
I am using IE 4.0
What I need to do is ---
I want to check in my javascript
if(event.keyCode == 65) (means if we press "a")
I want to change my focus from may be button --- to a Text Field..
so that key "a" works in the same way as "TAB" key ..
I don't want to loop through the elements in the form.. because I will be using the same script in many pages and all pages have different number of elements..
Is there anything like advanceFocus in javascript which can just advance my focus to next element on the page..
I guess browser already knows which element has got a focus .. May be I can use some of that information but I don't know how..
I would really appreciate any help with this..
Best Regards
Need some help with this.. I would really appreciate any help in this pls..
I have a small javascript
<script language="JavaScript1.2">
if (document.layers)
document.captureEvents(Eve
function alert_keycode(){
alert(event.keyCode)
}
document.onkeypress=alert_
</script>
<HEAD>
<form>
<P>INPUT: <INPUT type="button" value = "Check "></P>
<P><input type="text"></P>
</form>
</HTML>
I am using IE 4.0
What I need to do is ---
I want to check in my javascript
if(event.keyCode == 65) (means if we press "a")
I want to change my focus from may be button --- to a Text Field..
so that key "a" works in the same way as "TAB" key ..
I don't want to loop through the elements in the form.. because I will be using the same script in many pages and all pages have different number of elements..
Is there anything like advanceFocus in javascript which can just advance my focus to next element on the page..
I guess browser already knows which element has got a focus .. May be I can use some of that information but I don't know how..
I would really appreciate any help with this..
Best Regards
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
9
-
6
-
5
- +1
22 Comments
If you want the focus to be set at the texfield "yourinputfield" then do like this:
function alert_keycode(){
document.forms.yourformnam
}
function alert_keycode(){
document.forms.yourformnam
}
this I know..
But I want to know how to focus to a next textbox when somebody presses when somebody presses key "a"..
I know how to catch the event for key "a".. BUT How to pass the focus to a next textbox ..
not by just saying
document.forms.yourformnam
because I want to make some general purpose script which can work in all my html pages .. all my html pages have different forms and different and unique element names...
thats what the problem is..
Regards
But I want to know how to focus to a next textbox when somebody presses when somebody presses key "a"..
I know how to catch the event for key "a".. BUT How to pass the focus to a next textbox ..
not by just saying
document.forms.yourformnam
because I want to make some general purpose script which can work in all my html pages .. all my html pages have different forms and different and unique element names...
thats what the problem is..
Regards
if you have used some standard while naming the text fields, like callig the key "a" and the field "text_a". Then you can check which button that sends the request, add "text_" to the string and set it as the focus.
You could add an onfocus handler to each and every form element which saves a variable identifying which form element got focus last. Then find the next one in the form.elements array and focus on it...
-Josh
-Josh
Tested with NN4.61, MIE5 (WinNt)
<html>
<script language="JavaScript1.2">
if (document.layers)
document.captureEvents(Eve
function alert_keycode(k){
if(document.layers) alert(k.which)
if(document.all) alert(event.keyCode)
}
document.onkeypress=alert_
</script>
<HEAD>
<form>
<P>INPUT: <INPUT type="button" value = "Check "></P>
<P><input type="text"></P>
</form>
</HTML>
<html>
<script language="JavaScript1.2">
if (document.layers)
document.captureEvents(Eve
function alert_keycode(k){
if(document.layers) alert(k.which)
if(document.all) alert(event.keyCode)
}
document.onkeypress=alert_
</script>
<HEAD>
<form>
<P>INPUT: <INPUT type="button" value = "Check "></P>
<P><input type="text"></P>
</form>
</HTML>
jbirk .. your idea is cool and seems to be working fine.. Just a little bug is that I am able to get focus to next element but it inserts a tab character in my last element also..
if i have 2 textboxes ---
a and b
I have say right now focus on "a"
I take index of "a" and if somebody
presses tab.. I put my focus to "b"
Before I get a focus of "b", I insert a tab character in "a" .. so I think I just need to delete the last character (which is tab) if somebody presses tab...
How can I do so.. if you can help me with this.. I will really appreciate ..
Best Regards
if i have 2 textboxes ---
a and b
I have say right now focus on "a"
I take index of "a" and if somebody
presses tab.. I put my focus to "b"
Before I get a focus of "b", I insert a tab character in "a" .. so I think I just need to delete the last character (which is tab) if somebody presses tab...
How can I do so.. if you can help me with this.. I will really appreciate ..
Best Regards
Jbirk's idea is good, but wouldn't work :(
Since one button grabbed focus in NN4 (Win95) you have no chance to receive next keypress event at level of document, button peer will intercept all key events... And thus you can't use keypress to pass focus to next component :(
That's code I used for testing:
<html>
<script language="JavaScript1.2">
if (document.layers) {
document.captureEvents(Eve
}
function alert_keycode(k){
var code=-1
if(document.layers) code=k.which;
if(document.all) code=event.keyCode
if(code>=0){
inp = document.f.elements[ String.fromCharCode(code) ];
if(inp!=null){
window.status=inp+""
inp.focus();
}
}
}
document.onkeypress=alert_
</script>
<HEAD>
<form name=f>
<P>Press 'a' to pass focus here: <INPUT type="button" name="a" value = "Check " ></P>
<P>Press 'b' to pass focus here: <input type="text" name="b" ></P>
</form>
<script>
</script>
</HTML>
May be this idea wasn't bad for MIE
but it wouldn't work in NN4 :(
Since one button grabbed focus in NN4 (Win95) you have no chance to receive next keypress event at level of document, button peer will intercept all key events... And thus you can't use keypress to pass focus to next component :(
That's code I used for testing:
<html>
<script language="JavaScript1.2">
if (document.layers) {
document.captureEvents(Eve
}
function alert_keycode(k){
var code=-1
if(document.layers) code=k.which;
if(document.all) code=event.keyCode
if(code>=0){
inp = document.f.elements[ String.fromCharCode(code) ];
if(inp!=null){
window.status=inp+""
inp.focus();
}
}
}
document.onkeypress=alert_
</script>
<HEAD>
<form name=f>
<P>Press 'a' to pass focus here: <INPUT type="button" name="a" value = "Check " ></P>
<P>Press 'b' to pass focus here: <input type="text" name="b" ></P>
</form>
<script>
</script>
</HTML>
May be this idea wasn't bad for MIE
but it wouldn't work in NN4 :(
kollegov your is great
But problem is --
If I am in "b" textbox and I press "a" --
It focuses to "a" element but at the same time it takes "a" character inside the "b" textbox..
How I can make it happen so that textbox of "b" doesnt take "a" character and focus moves to "a" element...as soon as somebody presses "a"
Hope you can help me with this..
Regards
But problem is --
If I am in "b" textbox and I press "a" --
It focuses to "a" element but at the same time it takes "a" character inside the "b" textbox..
How I can make it happen so that textbox of "b" doesnt take "a" character and focus moves to "a" element...as soon as somebody presses "a"
Hope you can help me with this..
Regards
oH YEA ..
I just noticed this too..
This will work with some very particular key elements.. as you are checking ...
document.f.elements[ String.fromCharCode(code)
and you have named input box as "a" , "b"..
Well.. we are not naming input box as
"a", "b" or anything..
we are using ECML standard for naming the textbox.. and we don't want to change this..
so I think getting the variable of each element when its losing the focus is a better idea...
Just that I don't know How to take care of this last character which is always getting into my textboxes...
Regards
I just noticed this too..
This will work with some very particular key elements.. as you are checking ...
document.f.elements[ String.fromCharCode(code)
and you have named input box as "a" , "b"..
Well.. we are not naming input box as
"a", "b" or anything..
we are using ECML standard for naming the textbox.. and we don't want to change this..
so I think getting the variable of each element when its losing the focus is a better idea...
Just that I don't know How to take care of this last character which is always getting into my textboxes...
Regards
Here is what I was thinking for my idea: tested in IE5 NN4.7
<html>
<script language="JavaScript">
<!--
var focused_obj;
function alert_keycode(k)
{
var code=-1
if(document.layers) code=k.which;
if(document.all) code=event.keyCode
if(code==97)
{
for (i=0;i<document.f.elements
{if (focused_obj == document.f.elements[i])
{i++;
if (i>=document.f.elements.le
document.f.elements[i].foc
break;
}
}
}
}
function record_focus(obj)
{focused_obj=obj;
}
if (document.layers)
{document.captureEvents(Ev
}
document.onkeypress=alert_
// -->
</script>
<HEAD>
<BODY onload="focused_obj=docume
<form name=f>
<P>Press 'a' to pass focus to next one:
<P><INPUT type="text" name="a" onFocus="record_focus(this
<P><input type="text" name="b" onFocus="record_focus(this
</form>
</BODY>
</HTML>
It leaves behind the a character when you press it though, but that's a normal character to be putting into a text field... Do you not want a to appear in the text field?
-Josh
<html>
<script language="JavaScript">
<!--
var focused_obj;
function alert_keycode(k)
{
var code=-1
if(document.layers) code=k.which;
if(document.all) code=event.keyCode
if(code==97)
{
for (i=0;i<document.f.elements
{if (focused_obj == document.f.elements[i])
{i++;
if (i>=document.f.elements.le
document.f.elements[i].foc
break;
}
}
}
}
function record_focus(obj)
{focused_obj=obj;
}
if (document.layers)
{document.captureEvents(Ev
}
document.onkeypress=alert_
// -->
</script>
<HEAD>
<BODY onload="focused_obj=docume
<form name=f>
<P>Press 'a' to pass focus to next one:
<P><INPUT type="text" name="a" onFocus="record_focus(this
<P><input type="text" name="b" onFocus="record_focus(this
</form>
</BODY>
</HTML>
It leaves behind the a character when you press it though, but that's a normal character to be putting into a text field... Do you not want a to appear in the text field?
-Josh
No i don't want the character to appear in the textfield ..
Hope you can help me with this..
by that time I can try to understand your above code...
Thanks alot and regards
Hope you can help me with this..
by that time I can try to understand your above code...
Thanks alot and regards
Ok got it jbirk..
looks great to me... just that last character problem.. if you can help me with this.. would really be appreciable..
Regards
looks great to me... just that last character problem.. if you can help me with this.. would really be appreciable..
Regards
just add this:
if (document.f.elements[i].va
document.f.elements[i].val
}else{
document.f.elements[i].val
}
before you set the focus. Hope that does it. If not, just go with that idea (just popped up in my brain)
if (document.f.elements[i].va
document.f.elements[i].val
}else{
document.f.elements[i].val
}
before you set the focus. Hope that does it. If not, just go with that idea (just popped up in my brain)
you did add the missing ; at the end of the two lines? and take notice that the '' at the second line is two ' s.
Ok, you do know that the function you use above will unable the visitor to write the letter "a" in the textbox? He will be forwarded to the next box at once and the letter will appear there...
(i also understand that my script will do no good at all)
(i also understand that my script will do no good at all)
Yes I do understand that visitor should be unable to write a letter "a" ..and this letter should not appear on any textbox.. this letter should be used only to transfer focus between textboxes...
Now how to implement it if you can help me with this...
regards
Now how to implement it if you can help me with this...
regards
Just replace the "break;" line with "return false;" That's all you need. I didn't put it in there because I thought having the 'a' might be important...
-Josh
-Josh
I came up with this solution, but of no use of'course...
....just exchange you code for the function with this:
function record_focus(obj)
{focused_obj=obj;
focused_obj.value='';
}
It works fine for me.
....just exchange you code for the function with this:
function record_focus(obj)
{focused_obj=obj;
focused_obj.value='';
}
It works fine for me.
MHQ, that change removes all the text from the input field (assuming it is an input field). Even non 'a' characters are removed as well. Also it may cause an error if the input field is not a text field.
-Josh
-Josh
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know:
(CODE)
I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month7 days, 1 hour left to enroll
724 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.