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

javascript dom xhtml dom-events

26,053

Solution 1

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

Solution 2

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);
    }
}

Solution 3

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.

26,053

Author by

Tasneem Fathima

Updated on July 09, 2022

Comments

Tasneem Fathima almost 2 years

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>

Andy E about 12 years

Validation on blurring of inputs is much more appropriate, as long as you use unobtrusive methods such as highlighting the incorrect input. You are right that modal alerts are generally considered obtrusive and frustrating, however.
Vik about 12 years

Yes I meant to display notification as alerts. Thanks, I have updated my answer.
Lori over 11 years

setTimeout() does not work for me, with 0 or 10 or 100 msec. :-(
Vik over 11 years

Try to set focus on element and then return false;
pumpkinzzz almost 8 years

onblur triggers before the element loses focus .. this appears to be untrue. where did you get that info? can you demonstrate it? i tried with this simple fiddle and the result was that input already loss focus when blur event is triggered.
Andy E almost 8 years

@pumpkinzzz: you're correct, it must have been an incorrect assumption I made ;-)