Html input, always in focus

For FIREFOX, Try using setTimeOut, it works :

My JS :

myFocusFunction(){
      let myInput = document.getElementById('idOfInput');
      setTimeout(function() { 
           myInput .focus(); 
      }, 100);
}

my Html :

<input type="text" ng-blur="myFocusFunction()" auto-focus >

For react and the like:

<input  type={'text'}  autoFocus={true} onBlur={({ target }) => target.focus()}/>

Try this:

<!-- On blur event (unfocus) refocus the input -->
<input onblur="this.focus()" autofocus /> 
<input value="Can't focus on this" />

Basically, you add a blur event (which occurs whenever the input loses focus), and in the blur event, you focus on the input. In addition, you add the autofocus attribute to start off focused as well.

P.S. If you are planning to use this for a website for actual people to use, from a user interface perspective, this is probably not a great idea.

Tags:

Html

Css