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>

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

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

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.

来源：https://stackoverflow.com/questions/9884399/how-to-make-javascript-focus-method-work-in-onblur-event-for-input-text-box

标签

javascript

dom

javascript-events

xhtml