We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

onBlur Set Focus.

prasannap
prasannap asked
on
Medium Priority
6,948 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>
Comment
Watch Question

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>

Commented:
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)
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
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.




Commented:
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?)

Author

Commented:
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.

Commented:
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.

Author

Commented:
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?

Commented:
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.

Author

Commented:
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>

Commented:
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...

Author

Commented:
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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.