I have an input which should keep the focus, because of program requirements. While using the software the input might be hidden at some point but when showing up again it should recover the focus, but it doesn't. Still if you check the binded events on the input you can see it did not actually lost the event.
There's a simple jsfiddle showing this behaviour: https://jsfiddle.net/5puu261v/
$('#barcode').focus()
$('#barcode').focusout(function(){
$(this).focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#barcode').toggle()">Toggle input</button>
<input type="text" id="barcode" />It would be appreciated if I could fix or avoid it without binding the event back again.
Edit:
The point is: Why does the input doesn't get focused, after being toggled, when clicking on any other element (as the button that makes it visible again)?
You could add the .focus() to the click event so every time the button clicked the input will be focused, like :
$('button').click(function(){
$('#barcode').toggle().focus();
});
HTML :
<button>Toggle input</button>
<input type="text" id="barcode" />
Hope this helps.
$('#barcode').focus()
$('#barcode').focusout(function(){
$(this).focus();
});
$('button').click(function(){
$('#barcode').toggle().focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle input</button>
<input type="text" id="barcode" />You can call the method focus again at onclick event of button:
$('#barcode').focus()
$('#barcode').focusout(function(){
$(this).focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#barcode').toggle();$('#barcode').focus();">Toggle input</button>
<input type="text" id="barcode" />