[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Is there a Javascript getFocus function?

Posted on 2007-07-25
11
Medium Priority
?
5,139 Views
Last Modified: 2013-11-19
Hello Experts!! I am using Javascript and would like to see which element has focus on the page. Is there some soft of getFocus function I can use? Or, if not, is there a way to loop through the elements and find it that way? Thank you all !!!
0
Comment
Question by:CallConnection
  • 4
  • 4
  • 3
11 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19567061
<script>
var whichFocus=null;
</script>
<form>
<input type="text" name="fld1" onFocus="whichFocus=this">
<input type="text" name="fld2" onFocus="whichFocus=this">
<input type="text" name="fld3" onFocus="whichFocus=this">
<input type="text" name="fld4" onFocus="whichFocus=this">
<input type="text" name="fld5" onFocus="whichFocus=this">
<input type="button"
onClick="if (whichFocus)
alert('The item which had focus before you pressed this is '+whichFocus.name)"
value="what?">
</form>
0
 
LVL 11

Expert Comment

by:raj3060
ID: 19567151
somethig like this:

<script type="text/javascript">
var w;
onload=function(){
var el = document.forms[0].elements;
for(var i=0;i<el.length;i++){
el[i].onfocus=function(){w=this.name}
}
}
</script>
</head>
<body>

<form>
<a href="#" onclick="alert('The element named '+w+' was focused'); return false">"Which is focused?"</a><br>
<input name="txt1" type="text"><br>
<input name="txt2" type="text"><br>
<input name="txt3" type="text">
</form>
</body>
</html>
0
 

Author Comment

by:CallConnection
ID: 19567268
Very good Raj!!
Is there a way you could get the id of the element please?
I don't want to use the names unless I have to, to keep it dynamic...
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:CallConnection
ID: 19567601
Thank you both for answering so quickly!

<html>
<head>
<script type="text/javascript">
//Essentially the bigger problem was is that I needed to update some values on the page,
//after which the element "lost" focus - which I needed to restore...
//Here's my update - I will keep this open for a while and also accept any solutions which complete this script

var w;
function Start_GetFocus(){
var el = document.forms[0].elements;
for(var i=0;i<el.length;i++)
{
el[i].onfocus=function(){w=this}
}
}

function getFocus()
{
    alert('The element named '+w.id+' was focused');
}

function restoreFocus()
{
    //this part is "to do"!!!
    //this function should restore focus back to the element it left from when getFocus was called earlier.
}

function DoUpdatesAndRestoreFocus()
{
    setTimeout("getFocus();",1)
    setTimeout("DoSomeUpdates()();",10)
    setTimeout("restoreFocus();",500)
}

function DoSomeUpdates()
{
    //does some updates on page here...
    //let's say that the focus went back to the txt1
    document.getElementById('txt1').focus();
}

</script>
</head>
<body onload="Start_GetFocus();">
<form>
<!--a href="#" onclick="alert('The element named '+w.id+' was focused'); return false">"Which is focused?"</a><br-->
<input id="txt1" type="text" onblur="DoUpdatesAndRestoreFocus(); return false"><br>
<input id="txt2" type="text"><br>
<input id="txt3" type="text">
</form>
</body>
</html>

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19567651
The scripts are identical by the way except mine is using the object and not the name.

I think you want this

var whatField=null;
function DoUpdatesAndRestoreFocus(theField) {
  whatField=theField;
  setTimeout("DoSomeUpdates()",10)
  setTimeout("restoreFocus()",500)
}

function restoreFocus()
{
  if (whatField) whatField.focus(); // no names used
}
</script>
<input id="txt1" type="text" onblur="DoUpdatesAndRestoreFocus(this)"><br>

Notice the (this)
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 800 total points
ID: 19567671
or better


var whatField=null;
function DoUpdatesAndRestoreFocus(theField) {
  whatField=theField;
  setTimeout("DoSomeUpdates()",10)
}

function DoSomeUpdates()
{
    //does some updates on page here...
 if (whatField) whatField.focus(); // no names used
}
0
 
LVL 11

Expert Comment

by:raj3060
ID: 19568101
Sorry I was out for lunch.

you can either use @mplungian's solution or if you want to use loop sol'n and to to answer your question change name to id and it should work fine:

{w=this.id}
0
 

Author Comment

by:CallConnection
ID: 19568279
thank you mplungjan!!! ...but if only it was this simple - and by the way what you worte is fine in 99% of cases, except here it's a bit different...

Let's say the user was editing txt1 and clicked on txt2...
onblur function evaluates txt1 and does some changes on the page and updates some fields - but the user would actually expect to get back to txt2 - hence "this" cannot be used...

so actually I think I need to get the focus, "save it", and then re-focus on that 'new' item - which almost works in "ID: 19567601"? there must be just the last step missing to finish it off... I would really appreciate if you could me find it.
0
 
LVL 11

Expert Comment

by:raj3060
ID: 19568626
Here is the working code:

<html>
<head>
<script type="text/javascript">
//Essentially the bigger problem was is that I needed to update some values on the page,
//after which the element "lost" focus - which I needed to restore...
//Here's my update - I will keep this open for a while and also accept any solutions which complete this script

var w;
function Start_GetFocus(){
var el = document.forms[0].elements;
for(var i=0;i<el.length;i++)
{
el[i].onfocus=function(){w=this}
}
}

function getFocus()
{
    alert('The element named '+w.id+' was focused');
}

function restoreFocus()
{
    //this part is "to do"!!!
    //this function should restore focus back to the element it left from when getFocus was called earlier.
}

function DoUpdatesAndRestoreFocus()
{
    setTimeout("getFocus();",1)
    setTimeout("DoSomeUpdates();",10)
    setTimeout("restoreFocus();",500)
}

function DoSomeUpdates()
{
    //does some updates on page here...
    //let's say that the focus went back to the txt1
    document.getElementById(w.id).focus();
}

</script>
</head>
<body onload="Start_GetFocus();">
<form>
<!--a href="#" onclick="alert('The element named '+w.id+' was focused'); return false">"Which is focused?"</a><br-->
<input id="txt1" type="text" onblur="DoUpdatesAndRestoreFocus();"><br>
<input id="txt2" type="text"><br>
<input id="txt3" type="text">
</form>
</body>
</html>
0
 
LVL 11

Accepted Solution

by:
raj3060 earned 1200 total points
ID: 19568887
To clean what you did:

<html>
<head>
<script type="text/javascript">
var w;
function Start_GetFocus(){
var el = document.forms[0].elements;
for(var i=0;i<el.length;i++)
{
el[i].onfocus=function(){w=this}
}
}
function DoUpdatesAndRestoreFocus()
{    
    setTimeout("DoSomeUpdates();",10)  

}
function DoSomeUpdates()
{
    //does some updates on page here...    
    alert('The element named '+w.id+' was focused');
    document.getElementById(w.id).focus();
}

</script>
</head>
<body onload="Start_GetFocus();">
<form>
<!--a href="#" onclick="alert('The element named '+w.id+' was focused'); return false">"Which is focused?"</a><br-->
<input id="txt1" type="text" onblur="DoUpdatesAndRestoreFocus();"><br>
<input id="txt2" type="text"><br>
<input id="txt3" type="text">
</form>
</body>
</html>
0
 

Author Comment

by:CallConnection
ID: 19569404
Thank you very much for helping out!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to use and create new code templates in NetBeans IDE 8.0 for Windows.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

872 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