user1383587
user1383587

Reputation: 31

Text box focusout event and enter issues in IE9

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.

Upvotes: 2

Views: 1159

Answers (3)

user1383587
user1383587

Reputation: 31

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 .

Upvotes: 1

d.k
d.k

Reputation: 4470

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)

Upvotes: 0

Rido
Rido

Reputation: 53

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

Upvotes: 0

Related Questions