Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onBlur events and IE

    I am currently working on a website that administers timed online tests, and we are trying to implement some measures to reduce the ability to 'cheat' while the test is running. These include disabling right clicks, and handling keystroke events. Additionally, we would like to end the test if the maximized browser popup window where the test is loaded happens to lose focus during the testing session.

    I have implemented some code to call an event handler that will end the test if a window.onblur event is triggered during the session. It is working fine in Firefox, but IE seems to interpret window.onblur events differently. Basically, in Firefox I can click anywhere within the window without a window.onblur event triggering, but in IE if I click outside of the test table or form element etc. into whitespace, for instance, it fires.

    In addition to using window.onblur, I have also tried top.onblur, and also putting onblur in the body tag of my html:
    Code:
    <body bgcolor="#ffffff" onBlur="lostfocus()">
    Again, both work in Firefox, but neither of these alternate methods seem to restrict IE in the appropriate manner.

    So my question is this: is there any way to craft this such that IE will play nice and trigger the event ONLY when someone clicks outside of the browser window (on to the start menu, for instance)?

    Code:
    <script language="javascript">
    <!--
    window.onblur=lostfocus;
    function lostfocus(e) {
    	// student has attempted to cheat, end test
    }
    // -->
    </script>
    Thanks in advance for any insight you may be able to provide.

  2. #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, sounds good. and oh oh ... wait a minute ... can't they just turn off JS and evade your measures?
    *keep it simple (TM)

  3. #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, javascript is required for the test to function. Javascript is integral to the functionality - we're using alot of AJAX within the testing forms etc, and if Javascript is disabled in the browser, the test session won't even begin. If it's disabled during the test, the code will break and you'll basically be out of the money you paid. :-)

    These are online tests, but they are administered in a proctored environment. Besides, I'm not trying to keep Computer Science students from finding a workaround, just trying to prevent the average user from switching from the testing window over to a spellchecker or the calculator, etc.

  4. #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This works for me in IE, but you won't be able to stop them accessing the Start Menu etc. -

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>OnBlur</title>
    
    <script type="text/javascript">
    function doSomething(){
    alert('Lost Focus')
    }
    </script>
    
    </head>
    
    <body onblur="javascript:doSomething();">
    </body>
    
    </html>
    What about running IE in kiosk mode?

  5. #5
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doubt it. IE won't recognise <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /> because it doesn't understand the Mime type. IE doesn't support XHTML!
    *keep it simple (TM)

  6. #6
    Registered User _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by jbot
    doubt it. IE won't recognise <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /> because it doesn't understand the Mime type. IE doesn't support XHTML!
    Neither does Firefox or any other browser for that matter. Until the correct server side headers are passed the page will still be in text/html

  7. #7
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm puzzled... I've attempted recreating your situation even creating a form with "questions" etc. and the window.onblur seems to work for both IE and FF... The only thing I could think of that might be the problem is that in your question, you were calling lostfocus(e). I believe that IE is the browser that doesn't pass in an event to the function. Instead you would need to inclue:
    Code:
    if (!e) var e = window.event;
    as the first line inside the function. Other than that, I can't see why IE isn't working correctly.

    Actually it was FF that I was getting mixed results. The latest version of FF has tabs... Every once in awhile, I was able to switch to a different tab without having the function trigger (although I couldn't open a new tab without it triggering, so this might not be a problem).
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  8. #8
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your replies.

    I had looked into a kiosk mode solution, but unfortunately my requirements are such that no external software has to be deployed, and no intervention from a system administrator/technical supporter is necessary. Even with IE kiosk mode, you have to start it from the command line.

    I think the Javascript measures I outlined would satisfy our needs, but I still cannot get IE to function appropriately. I have created a minimal html page that very closely reproduces my actual environment, to illustrate the problem in better detail. I have tested this html page in Firefox 1.0 and 1.5, and in IE 6.0. In Firefox, the onblur event is only triggered when I click completely off the browser window. In IE however, if, for example, I click outside of the 750px table and then back into it, the event triggers. I have reproduced these same results on three different PCs.

    I would be curious to hear what anyone else experiences when running this page.

    Code:
    <html>
    <head>
    <title>OnBlur Test</title>
    <script language="javascript">
    <!--
    window.onblur=blurtest;
    function blurtest(e) {
    	if (!e) {
    		var e = window.event;
    	}
    	alert('Lost Focus!');
    }
    // -->
    </script>
    </head>
    <table width="750" border="0" align="center" id="test">
    	<tr>
    		<td align="center">onBlur Sample Test</td>
    	</tr>
    	<tr>
    		<td align=center width="750"><br>
    			<form method="POST" name="entry_form">
    				<table width="100%" cellpadding="0" cellspacing="0" border="0" onmousedown="return false">
    					<tr>
    						<td valign="top" bgcolor="#000000">
    							<table width="100%" cellpadding="10" cellspacing="1" border="0">
    								<tr bgcolor="#FFFFFF">
    									<td valign="top" colspan="1" onmousedown="return false">
    										1. Here is the test question.<br><br>
    										<b>A)</b><input type="radio" name="answer_1" value="1">Answer A<br>
    										<b>B)</b><input type="radio" name="answer_1" value="2">Answer B<br>
    										<b>C)</b><input type="radio" name="answer_1" value="3">Answer C<br>
    										<b>D)</b><input type="radio" name="answer_1" value="4">Answer D<br>
    										<b>E)</b><input type="radio" name="answer_1" value="5">Answer E<br>
    									</td>
    								</tr>
    								<tr bgcolor="#FFFFFF">
    									<td valign="top" colspan="1" onmousedown="return false">
    										2. Here is the test question.<br><br>
    										<b>A)</b><input type="radio" name="answer_2" value="1">Answer A<br>
    										<b>B)</b><input type="radio" name="answer_2" value="2">Answer B<br>
    										<b>C)</b><input type="radio" name="answer_2" value="3">Answer C<br>
    										<b>D)</b><input type="radio" name="answer_2" value="4">Answer D<br>
    										<b>E)</b><input type="radio" name="answer_2" value="5">Answer E<br>
    									</td>
    								</tr>
    								<tr bgcolor="#FFFFFF">
    									<td valign="top" colspan="1" onmousedown="return false">
    										3. Here is the test question.<br><br>
    										<b>A)</b><input type="radio" name="answer_3" value="1">Answer A<br>
    										<b>B)</b><input type="radio" name="answer_3" value="2">Answer B<br>
    										<b>C)</b><input type="radio" name="answer_3" value="3">Answer C<br>
    										<b>D)</b><input type="radio" name="answer_3" value="4">Answer D<br>
    										<b>E)</b><input type="radio" name="answer_3" value="5">Answer E<br>
    									</td>
    								</tr>								
    							</table>
    						</td>
    					</tr>
    				</table>
    				<table width="100%" cellpadding="5" cellspacing="1" border="0">
    					<tr>
    						<td valign="top" align="center">
    							<input type="submit" name="element_prev" value="Previous Page">
    							<input type="submit" name="element_next" value="Next Page">
    						</td>
    					</tr>
    				</table>
    			</form>
    		</td>
    	</tr>
    </table>
    </html>

  9. #9
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're right! I noticed that your sample forgot the <body> tags, but even with them added, the onblur function will still fire if clicked outside of the table. Since the examples that I was trying didn't use tables, it may have something to do with those elements...
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  10. #10
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy oblur in IE - the same problem

    Hello! Did you find any solution? I experience the same problem: window.onblur (or <body onblur ....>) fires not only when I switch to other browser window or other application, but also when I click inside the window itself, on HTML table or whatever. It's crazy! Mozilla / Firefox work as expected, but IE does not allow to implement correctly such a simple feature as to close a popup window when it looses focus.

  11. #11
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile A solution

    Here's a solution:

    In script block in header put the following:

    var active_element;
    var bIsMSIE = false;

    function save_active()
    {
    active_element = document.activeElement;
    }

    /*
    In Internet Explorer 'onblur' event is implemented incorrectly (as opposed to Firefox/Mozilla browsers).
    It is wrongly fired when focus is switched between HTML elements *inside* a window. As a result, clicking
    on any element *inside* a popup window or trying to select something there will also close a popup.
    Below is a workaround.
    */
    function initiateSelfClosing()
    {
    if (navigator.appName == "Microsoft Internet Explorer") {
    active_element = document.activeElement;
    document.onfocusout = closeWnd;
    bIsMSIE = true;
    }
    else { window.onblur = closeWnd; }
    }


    function closeWnd()
    {
    if (window.opener != null) {
    if (bIsMSIE && (active_element != document.activeElement)) {
    active_element = document.activeElement;
    }
    else {
    window.close();
    }
    }
    }

    Add the following to body element:

    <body onload="initiateSelfClosing()">

    You're very welcome to see this and other things on my developer's bolg.
    Last edited by Vladimir Kelman; Oct 26th, 2006 at 10:34 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •