Reputation: 31
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
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
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
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