<div id="topDiv">
    <input id="txtKeyword" type="text" />   
</div>

My purpose is to make txtKeyword getting focus when the page gets focus. My code,

 window.addEventListener("focus", function(event) {
      setTimeout(function(){
        txtKeyword.focus();
      }, 100);
    });

That works pretty well when there is only one text element there. When I add another text element,

<div id="topDiv">
    <input id="txtCmd" type="text" /><input id="txtKeyword" type="text" />     
</div>

when I click txtCmd to make the page getting focus, I don't want the focus is reset to txtKeyword, just leave to txtCmd. My code,

window.addEventListener("focus", function(event) {
        if(document.activeElement === txtCmd){
            return
        }
      setTimeout(function(){
        txtKeyword.focus();
      }, 100);
    });

I try to compare if the current focused element is txtCmd, if so, return. However, when the page gets focus via clicking txtCmd, the focused element is topDiv rather than txtCmd. How do I check if I really click txtCmd?

Edit:

1. I forgot to mention, all the element txtCmd or txtKeyword I have defined global variables and assigned the values in onload event.

2. The document.activeElement is body rather topDiv, my fault.