CODEWITHSUNDEEP
javascriptdomxhtmldom-events
Tasneem Fathima
Tasneem Fathima

Reputation: 159

How to make Javascript focus() method work in onBlur event for input text box?

For me Javascript focus() method is working fine if I use it with a button and onClick event, but with onBlur from a text box, it is not working. Can anyone guide me on this?

<html>
<head>
<script type="text/javascript">
function displayResult()
{
var inp1=document.getElementById("text1").value;
var inp2=inp1.length;
if(inp2==0)
{
alert("Field 1 cannot be left Empty");
//document.getElementById("text1").value="";
document.getElementById("text1").focus();
}
}
</script>
</head>
<body>
<input type="text" name="text1" id="text1" onBlur="displayResult();"/>
<input type="text" name="yext2" id="text2" />


</body>
</html>

Upvotes: 6

Views: 28244

Answers (4)

Mladen Janjic
Mladen Janjic

Reputation: 117

There's no problem in calling focus() on blur event on the same element, if user tries to focus on any other element that does try to refocus itself on blur event (e.g. a button).

But, if there are more than one input elements of type text, password, number, etc., and all of them try to return focus to themselves on blur event, that causes a blur-focus loop between 2 or more elements.

Let us observe a simple example with 2 input elements of type text:

  • User fills-in the first input, but it is not valid (e.g. username does not contain at least 6 characters), then moves focus to the second input (presses tab key or clicks on the second input field);
  • Blur event triggers on the first input element and calls validation function, which tries to return the focus to the first input element, but that causes...
  • Blur event to trigger on the second input element and calls validation function which tries to return focus to the second input element, which further causes blur on the first input element...

This sequence of events may cause different behavior in different browsers, especially if there's also an alert dialog for each invalid input, but the result is obviously an infinite loop of blur and focus events on at least two input elements, even if calling focus() is delayed.

Thus, the easiest solution is to avoid refocusing itself on blur event.

Upvotes: 0

Andy E
Andy E

Reputation: 344585

It's not possible to reapply focus to an element when its blur event triggers. Use a timer with an interval value of 0 to delay the call to focus until afterwards:

function displayResult() {
    var inp1 = document.getElementById("text1").value,
        inp2 = inp1.length;

    if(inp2==0) {
        alert("Field 1 cannot be left Empty");
        //document.getElementById("text1").value="";

        window.setTimeout(function () { 
            document.getElementById("text1").focus();
        }, 0);
    }
}

Upvotes: 5

Vik
Vik

Reputation: 5961

You need to set little delay in the focusing of the field.

setTimeout(function(){field.focus()}, 10);

like :

<html>
<head>
<script type="text/javascript">
function displayResult(obj)
{
  var inp1=obj.value;
  var inp2=inp1.length;
  if(inp2==0)
  {
    alert("Field 1 cannot be left Empty");
    setTimeout(function(){obj.focus()}, 10);
  }
}
</script>
</head>
<body>
<form>
<input type="text" name="text1" id="text1" onblur="displayResult(this);"/>
<input type="text" name="yext2" id="text2" />
<input type="submit">
</form>
</body>
</html>

I advise you not to use onblur in validating inputs if you are display notification message as alerts. It's quite annoying , it produces endless alerts . Validate form onsubmit event.

Upvotes: 2

Tabrez Ahmed
Tabrez Ahmed

Reputation: 2950

Since the time you posted the question, I experimented your issue for an hour using different techniques. It now seems to me that through an event on an input, you cannot set focus on itself.

Still, There is another possible workaround. You can call displayResult() when the form is submitted, check if text1 is empty and cancel submit if it is empty and set focus on text1. I have rewritten the code for you.

<html>
<head>
<script type="text/javascript">
function displayResult()
{
var inp1=document.getElementById("text1").value;
var inp2=inp1.length;
if(inp2==0)
{
alert("Field 1 cannot be left Empty");
document.getElementById("text1").focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return displayResult();">
<input type="text" name="text1" id="text1" />
<input type="text" name="yext2" id="text2" />
<input type="submit"  />
</form>

</body>
</html>

Hope that helps...

Peace be upon you ...

Upvotes: 1

Related Questions