CODEWITHSUNDEEP
jquery
mi10
mi10

Reputation: 213

Conflict between blur on textarea and submit on input button

I have a text area and a button. I have code that extends the text area on focus and shrinks on blur event. When the user presses the button, it submits the content to server. The issue is that when user types text and then clicks the button, it results in blur event on text area before the click on button. The box shrinks but the button click action gets masked. I have gone through various threads on similar topic and have already tried various options but neither worked...

  1. tried to add this in blur handler... but didn't help...

    if ($(':focus').is('#submitbtn')) { return false; }

  2. tried adding this to blur handler... but it didn't work in IE even though it worked in Chrome... 

    if (event.relatedTarget != null && event.relatedTarget.nodeName == "INPUT") {

  // Now call click on the related Target which was the submit button

  event.relatedTarget.click();

}

  3. tried following approach but didn't help...

    $("#myTextArea").blur(function(evt) {

    if (evt.target is not the button){ //pseudo code

      //do something 

      return true; // I handled it

    }

    return false; // I didn't handle it

})

Any other solutions?

Upvotes: 1

Views: 1174

Answers (1)

Neha
Neha

Reputation: 1548

Well its tricky .. i donot know why but its capture the button focus but not click .. here is code where if submit button have focus submit the form.. (hope its help.. as i know its not complete fix)

$("#btn_0").focus(function() {  
/*its capture the focus but not the click*/
  $("#f1").submit();
});

Working dmeo

Upvotes: 1

Related Questions