CODEWITHSUNDEEP
javascriptjsf
Brian Knoblauch
Brian Knoblauch

Reputation: 21389

How do I force a function to run on any focus change?

My goal is to make sure that the same component always has focus. The form has one input box and a number of buttons. The user will scan a barcode (with a scanner emulating a keyboard) and then select a button to activate a function. I'd like them to be able to scan multiple barcodes without having to click on the input box. I've got the following javascript that does the dirty work of preparing the inbox for overwriting (currently only if they move focus to the inbox though).

function SelectAll(id)
    {
        document.getElementById(id).focus();
        document.getElementById(id).select();
    }
    window.onload = SelectAll('form:scan');

I need to allow input to go unimpeded (hence the thought that it should only return focus when focus is lost). I've already tried adding the function to focus change and button activation events with no success. Really need to make it page wide it seems as the focus goes somewhere unknown after button activation.

EDIT

Appears that doing a focus change on a blur event doesn't work in this case. It looks like JSF's handlers move the focus after the blur event (and hence focus change request) executes. Any JSF experts know how to get inside JSF's handlers and tweak them instead of trying to do it with pure javascript?

EDIT

I'm part way there. The reason blur events were being ignored had to do with the whole form being re-rendered instead of just individual components during the AJAX call. Limiting the update scope makes it work for all components, except the input box itself. I need the inputbox itself to re-render as it does some validation on input. If I disable re-rendering of it, it will select on input. If I enable re-rendering, the select code runs before the validated information is put back in. When the info goes back in, the selection is lost (focus is maintained, but without selection in place we can't immediately scan again, need to click somewhere).

Upvotes: 0

Views: 789

Answers (1)

Josh Bedo
Josh Bedo

Reputation: 3462

Try this out pretty sure window load doesn't work in jsfiddle

http://jsfiddle.net/jemZT/

var scannerID = document.getElementById("scannerID");
function startFocus(){
    scannerID.focus();
}
if(window.addEventListener){
    window.addEventListener('load',startFocus,false); //W3C
}
else{
    window.attachEvent('onload',startFocus); //IE
}
scannerID.addEventListener("blur", function(e){
    e.target.focus();
});​

Their are also events for copying and pasting to easily make it when you click a tag it copies it to clipboard might interest you to make the process of copying and pasting codes more simple.

EDIT: confirmed and working I tried this in my browser and it works perfect.

<html>
<body>
<input type="text" id="scannerID" />
<script type="text/javascript">
var scannerID = document.getElementById("scannerID");
if(window.addEventListener){
    window.addEventListener('load',startFocus,false); //W3C
}else{
    window.attachEvent('onload',startFocus); //IE
}
function startFocus(){
    scannerID.focus();
}
scannerID.addEventListener("blur", function(e){
    e.target.focus();
});
</script>
</body>
</html>

Upvotes: 1

Related Questions