Text box focusout event and enter issues in IE9

Question

I have a text input and one button of type submit adjacent to the input. I have bound focusout event-handler to the input and click event-handler to the button. Now when I focus on the input and then press enter, the focusout event-handler gets triggered and the buttons-event handler gets triggered. I want to trigger focusout only when text box focus is lost. What should I do ?

Code :-

 <div >
     <span>Local Currency: </span>
     <input type='text' id='txtFocusElement'  />
     <button id="btnClickElement" >
         <span> Add new line</span>
     </button>
 </div>

I used selector as:

 $("#txtFocusElement").bind("focusout", function() {
      console.log('focusout');
 })
 $("#btnClickElement").bind("click", function() {
      console.log('click');
 })

and written above code in one function which I call at the time of loading document.

Answer 1

You could try to change the selector to input[type=text]. This will only get triggered when you focus out on a text field.

Answer 2

Try to attach to a mouseup event instead of click, that is the only solution I see for now

You can also add a check for mouse button which was pressed, so it wouldn't fire if user would press a right button

var ClickElementEventHandler = function(e) {
    if (e.which != 1) return;
    //your code
};

$("#btnClickElement").bind("mouseup",ClickElementEventHandler)

Answer 3

Its IE9 issue with the HTML button tag.

So we should try it with HTML input tag with attribute type as button.

above code can be rewritten as :

<div >
     <span>Local Currency: </span>
     <input type='text' id='txtFocusElement'  />
     <input id="btnClickElement" type="button" value="Add new line" />
</div>

Using this my problem gets solved .