Solved

onBlur Set Focus.

Posted on 2004-03-22
12
6,123 Views
Last Modified: 2010-08-05
Hi,

My problem is in netscape onBlur event, I can't set the focus back to the same control again.
How could I do it?

e.g.
<html><head><title>onFocus/onBlur/onClick Demo</title></head>
<body>
<form name="bla">
     <script language="Javascript">
      function bla_OnBlur()
      {
      document.forms["bla"].elements["blatext1"].focus();
       }
      </script>
<table border="1">
<tbody><tr><th>Box 1</th><th>Box 2</th><th>Button</th></tr>
<tr><td>
<input name="blatext1" type="text" onBlur="javascript:bla_OnBlur()" onfocus="document.getElementById('Info1').innerHTML = 'focus!'">
</td><td>
  <input name="blatext2" type="text" onfocus="document.getElementById('Info2').innerHTML = '...Focus...'" onblur="document.getElementById('Info2').innerHTML = '...Blur...'">
</td><td>
  <input name="blabut" type="button" value="Press me" onclick="window.close()">
</td></tr>
<tr><td id="Info1">focus!</td><td id="Info2">...Blur...</td><td></td></tr>
</tbody></table>
</form>
</body></html>
0
Comment
Question by:prasannap
  • 6
  • 5
12 Comments
 
LVL 8

Expert Comment

by:william_jwd
Comment Utility
try this,

<html><head><title>onFocus/onBlur/onClick Demo</title></head>
<body>
<form name="bla">
     <script language="Javascript">
      function bla_OnBlur(obj)
      {
     obj.focus();
       }
      </script>
<table border="1">
<tbody><tr><th>Box 1</th><th>Box 2</th><th>Button</th></tr>
<tr><td>
<input name="blatext1" type="text" onBlur="javascript:bla_OnBlur(this)" onfocus="document.getElementById('Info1').innerHTML = 'focus!'">
</td><td>
  <input name="blatext2" type="text" onfocus="document.getElementById('Info2').innerHTML = '...Focus...'" onblur="document.getElementById('Info2').innerHTML = '...Blur...'">
</td><td>
  <input name="blabut" type="button" value="Press me" onclick="window.close()">
</td></tr>
<tr><td id="Info1">focus!</td><td id="Info2">...Blur...</td><td></td></tr>
</tbody></table>
</form>
</body></html>
0
 
LVL 7

Expert Comment

by:searlas
Comment Utility
You cannot cancel a blur event, so you have to try to stop it happening in the first place.  Does this do what you want?

       function cancelTab(evt) {
           return evt.keyCode != 9;
       }

        <input name="blatext1" type="text" onBlur="bla_OnBlur()" onfocus="document.getElementById('Info1').innerHTML = 'focus!'" onKeyPress="return cancelTab(event)">

(NB: event handler attributes ('onclick', 'onblur' etc.) do NOT need to be prepended with javascript: - that's only used for href attributes)
0
 
LVL 7

Accepted Solution

by:
searlas earned 100 total points
Comment Utility

The other alternative (which makes me feel dirty) is to do this:
      function bla_OnBlur()
      {
      window.setTimeout('document.forms["bla"].elements["blatext1"].focus()', 1);
       }
0
 

Author Comment

by:prasannap
Comment Utility
Thanks a lot searlas,
Your third solution is just perfect.

There are few problems to second solution.
Because of this function the cancelTab. The tab key gets ignored.
But if I directly click on submit (using mouse) then it gets submitted.

Actually if I decide to use third solution then I have to write few more functions here.
But if we could modify the 2nd solution such that it will work same like 3rd one then
it would be the best. It will keep the code size small as well.




0
 
LVL 7

Expert Comment

by:searlas
Comment Utility
I'm don't think I understand exactly what you want to achieve.

Do you want focus to remain on one text box no matter what?  Is your intent to trap the cursor in an input box, or is your main aim to stop invalid data being submitted (where an onSubmit handler would be the best solution?)
0
 

Author Comment

by:prasannap
Comment Utility
My aim is to stop invalid data being submitted.

But I can't do it on submit, because there are numerous inputs controls on the form.
Also I have to check the values the user enters and have to popup the messages.
So I have to validate those controls on blur only.

I think this will clear my problem.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 7

Expert Comment

by:searlas
Comment Utility
I don't agree, the whole point of onsubmit is to provide a hook so you can check all the fields of a form and cancel the submission of a form!  See:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/onsubmit.asp

specifically:
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server. If the event handler is called by the onsubmit attribute of the form object, the code must explicitly request the return value using the return function, and the event handler must provide an explicit return value for each possible code path in the event handler function.

The submit method does not invoke the onsubmit event handler.

0
 

Author Comment

by:prasannap
Comment Utility
I agree that you have to handle the validations on submit.
But the page is not like that.
I need the page to be interactive.
Such that when user enters any values and tries to enter more at that time the fields gets validated and the user gets alert accordingly.

Actually the third solution is also not working since if I click on any button which submits the page
then I get the alert and in the background the page gets submitted!!!

But in MS Internet Explorer evth just works fine.

So for now I took a flag and I set it true.
If the user entered valid inputs then the flag remains true else false.
On every submit I'm checking that flag.
But now the problem is when I click on the radio button.
It first checks(checked=true) the radio button and then goes to the onblur event.
And hence there he gets the flag status true and the page is getting submitted.

What should I do now?
0
 
LVL 7

Expert Comment

by:searlas
Comment Utility
Your extract of HTML doesn't show any radio buttons.  If you know the only entered input is from the users then I'd likely use onchange/onclick events to trigger alert boxes, and an onsubmit handler to validate the form and cancel submission if possible.  Note the comment above that calling form.submit() will not cause your onsubmit handler to be called (and therefore does not allow you to cancel the form submission.)

Still, if you show us a larger extract of your HTML we can try and get it working using your mechanism, or focus on simply making it work.

0
 

Author Comment

by:prasannap
Comment Utility
Take the following html as example.

<HTML><SCRIPT Language=Javascript>
function optTasks_OnClick()
{
      alert('Click of radio button');
      window.location.href = "http://www.google.com";
}
function TextOnBlur(obj)
{
      alert('Blur of Text Box');
      obj.focus();
      return;
}
</SCRIPT>
<head>
<title>Test</title>
</head>
<h1>
Test
</h1>
</head>
<body>
<Input type=radio name="optMainTaskFilter" id="optAllTasks" class='' value="5"  language=Javascript OnClick=optTasks_OnClick() >
Radio button<br>
<Input type=text name='txtInput' id='txtInput' language=javascript onBlur=TextOnBlur(this) > Text Box. Event <b>onBlur</b><br>
</b>
<br><br><br>
Steps:<br>
1. Click on the text box (write something)<br>
2. Try to click on radio button.<br>
3. The message box should appear saying "Blur of Text Box"<br></p>

Browse this example in both the browsers.
And see the difference.</p>
In IE. Only on blur will get fired.</p>
In Netscape. On blur as well as on click will get fired.</p>
</body>
</HTML>
0
 
LVL 7

Expert Comment

by:searlas
Comment Utility
OK, I know Netscape and IE fire off their events in different orders; I usually find that time spent understanding the sequence of onfocus/onblur/onchange is time better spent redesigning your validation so it doesn't matter what order people are entering data in.  For example, trapping a user inside a text box because they haven't entered a valid phone number is extremely frustrating when the user just wants to tab out and enter their address first.

The HTML above doesn't have a purpose.  Can you show us what you're trying to do?  Sometimes just changing the background colour of invalid fields is enough to show users why the form won't submit when they click the button...

0
 

Author Comment

by:prasannap
Comment Utility
Actually the page is a Weekly Bulk Insert Timesheet.
which has Task type radio buttons, Actual % complete textboxes, Hours Worked text boxes.
Is complete? check boxes. I can't send wou the whole html.

I'm thinking some other way round.
Solution 1.
1) On focus store the value and ID of the text box in the array.
2) Store the radio buttons which are currently checked.
3) On click of radio button.
    a) get the values from array and validate the fields again without showing any message.
    b) If validation fails then set the values of checked radio buttons as it was.
        else (validation succeeds) change the value of radio buttons and reset the array of textbox value and IDs

Solution 2.
Identify the browser type and plot links instead of radio buttons.

If you have any more ideas then plz let me know.

Thanks a lot searlas for helping me solving the problem.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

763 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

6 Experts available now in Live!

Get 1:1 Help Now