Solved

javascript focus

Posted on 2000-03-23
22
1,138 Views
Last Modified: 2012-08-13
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(Event.KEYPRESS)
function alert_keycode(){
alert(event.keyCode)
}
document.onkeypress=alert_keycode
</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

0
Comment
Question by:narrav
  • 9
  • 6
  • 5
  • +1
22 Comments
 
LVL 3

Expert Comment

by:MHQ
ID: 2651082
If you want the focus to be set at the texfield "yourinputfield" then do like this:


function alert_keycode(){
document.forms.yourformname.yourinputfield.focus();
}



0
 

Author Comment

by:narrav
ID: 2651152
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.yourformname.yourinputfield.focus();

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
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2651567
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.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2651932
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
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2651948
Tested with NN4.61, MIE5 (WinNt)

<html>
<script language="JavaScript1.2">

if (document.layers)
   document.captureEvents(Event.KEYPRESS)
function alert_keycode(k){
 if(document.layers)   alert(k.which)
 if(document.all)      alert(event.keyCode)
}
document.onkeypress=alert_keycode
</script>
<HEAD>
<form>
   <P>INPUT: <INPUT type="button"  value = "Check "></P>
   <P><input type="text"></P>
   </form>
</HTML>

0
 

Author Comment

by:narrav
ID: 2653573
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



0
 
LVL 10

Expert Comment

by:kollegov
ID: 2653949
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(Event.KEYPRESS)
}
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_keycode

</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 :(
0
 

Author Comment

by:narrav
ID: 2654287
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
0
 

Author Comment

by:narrav
ID: 2654307
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
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2654378
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.length;i++)
    {if (focused_obj == document.f.elements[i])
      {i++;
       if (i>=document.f.elements.length) i=0; // wrap condition
       document.f.elements[i].focus();
       break;
      }
    }
  }
}

function record_focus(obj)
{focused_obj=obj;
}

if (document.layers)
 {document.captureEvents(Event.KEYPRESS);
 }
document.onkeypress=alert_keycode;
// -->
</script>
<HEAD>
<BODY onload="focused_obj=document.f.elements[0];">
<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
0
 

Author Comment

by:narrav
ID: 2654528
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
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:narrav
ID: 2654539
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
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2654747
just add this:
if (document.f.elements[i].value){
document.f.elements[i].value = document.f.elements[i].value
}else{
document.f.elements[i].value = ''
}

before you set the focus. Hope that does it. If not, just go with that idea (just popped up in my brain)
0
 

Author Comment

by:narrav
ID: 2654842
sorry MHQ.. doesn't work at all..

I am still hoping Josh has some better idea...

0
 
LVL 3

Expert Comment

by:MHQ
ID: 2654993
you did add the missing ; at the end of the two lines? and take notice that the '' at the second line is two ' s.
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2655026
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)
0
 

Author Comment

by:narrav
ID: 2655036
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
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2655164
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
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2655182
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.

0
 
LVL 8

Expert Comment

by:jbirk
ID: 2655201
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
0
 

Author Comment

by:narrav
ID: 2655231
Josh.. you are right...
:))
0
 
LVL 8

Accepted Solution

by:
jbirk earned 80 total points
ID: 2655312
So is it solved then?
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now