Solved

Problem with window & control focus/blur events

Posted on 2000-04-20
5
211 Views
Last Modified: 2007-10-18

Hi,

I've been trying to create a popup window with javascript that always stays on top (window.focus() in onBlur event).
I've managed to do so but now I have to be able to enter some data in that popup by the use of a textfield (or anything like it).

This seems to be impossible to do.

The problem is that when the onFocus event of the textfield is triggered the window.onBlur event takes back focus to the window so nothing can be entered in the textfield.
I tried stopping this by setting a boolean to false in the textfields onFocus event so the window doesn't take focus.
This doesn't work.
It looks like the boolean set in the textfields onFocus event isn't set when I check it in the window.onBlur event.

If anyone knows how to solve this, or has an explanation for this problem, I'd love to hear it.

I've inserted the html-page I've been using for testing the problem rigth here :

-----------------start of code---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Launch popup window</title>

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

var getfocus=true; // grab window focus?

function edit_onfocus() {
 
  getfocus=false;  
  lstevent.value = "edit_onfocus()\n" + lstevent.value
 
}

function edit_onblur() {

  getfocus=true;
  lstevent.value = "edit_onblur()\n" + lstevent.value
 
}

function button1_onclick() {

  getfocus=!getfocus
  lstevent.value = "getfocus=" + getfocus + "\n" + lstevent.value

}

function window_onblur() {

  lstevent.value = "window_onblur()\n" + lstevent.value
  if (getfocus) {
    window.focus ();  
  }
 
}

function button2_onclick() {
 
  lstevent.value = "";
 
}

//-->
</SCRIPT>
</head>
<BODY LANGUAGE=javascript onblur="return window_onblur()">
<INPUT type="button" value="switch getfocus" id=button1 name=button1 LANGUAGE=javascript onclick="return button1_onclick()">
<br>
Try to enter text in this box : <input type="text" name="edit" LANGUAGE=javascript onfocus="return edit_onfocus()" onblur="return edit_onblur()">

<p>

Events:<br>
<TEXTAREA rows=10 cols=40 id=lstevent name=lstevent>
</TEXTAREA>
<INPUT type="button" value="Clear" id=button2 name=button2 LANGUAGE=javascript onclick="return button2_onclick()">
</body>
</html>
---------------- end of code -------------------

have fun,
see ya.

0
Comment
Question by:newjack
5 Comments
 
LVL 5

Expert Comment

by:djbusychild
ID: 2735688
seems to work for me..

<html>
<head>
<script>
var typing=0;
function setTyping()
{
typing=1;
}
function getWindowFocused()
{
if (typing==1) {
      return true;
}
focus();
}

</script>
</head>
<body onblur=getWindowFocused()>
<form method=post action=#>
<input  onfocus=setTyping() type=text name=hello>
</form>
</body>
</html>

0
 
LVL 3

Author Comment

by:newjack
ID: 2736221

Btw, I'm testing this on IExplore v4 & v5.

It seems to work indeed, but I have to click on the edit box twice before I can enter anything.

This is the same problem I'm having, one way or the other it doesn't work from the first time.

The problem is I also set the switch back when I get an onBlur in the entryfield to make sure the window stays on top at all time (this is not the case in the example posted by djbusychild) making it impossible to enter data.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2736499
The onblur-focus() hack has it's problems, yes... Have you read Danny Goodman's modal dialog article? http://developer.iplanet.com/viewsource/goodman_modal/goodman_modal.html
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2737960
what you might want to do is to call a javascript function in the onblur() of the window. That function will loop through all items INSIDE that HTML page, if there IS an item which has the focus at that exact moment then you don't do the window.focus.....if there is no object inside the html page which has the focus you just focus the window again....

shouldn't be too hard to implement.
0
 
LVL 22

Accepted Solution

by:
CJ_S earned 200 total points
ID: 2737986
That'd be like changing your function to:

function window_onblur()
{
  var IsInWindow;
  for(i=0;i<document.all.length;i++)
  {
     if(document.all(i).focus)
        IsInWindow = 1;
  }
  if(!IsInWindow)
     window.focus()  
}
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

757 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

18 Experts available now in Live!

Get 1:1 Help Now