Is it possible for an input element to have a cursor without focus?

Question

So this is a unique scenario.

This is a web application that is not available anywhere except the application on the top panel. The peripheral for this application is a TV remote control .

ie: NO keyboard , NO mouse .

Of course, when the input element is focused, the cursor appears and blinks at the current position. You enter characters, they are displayed, and the cursor automatically moves forward. whoohoo!

But we need to repeat this behavior when the input element is not focused .

This behavior is mainly observed in video games and other TV / large screen interfaces. You have an on-screen keyboard, and you select characters by moving in a letter or number, and pressing the enter / select button or any "select" button for this platform (for example, the "X" button on the Playstation). The letter appears in the input field, cursoradvances, but the actual element with focus is the current key on the on-screen keyboard.

We tried to make the keyboard using tags <div>, but then we lost the behavior of the very convenient placeholderattr, and this is just a mess of logic, recreating what tags cursorand should do placeholder. I would like cursorALWAYS to be on the input element immediately after the last character and NOT to be present when the input does not matter, showing only placeholder="Search". It almost seems like I need to have two elements on the page with focus, which is impossible, as far as I know.

But is it possible that the input element is not focused and still sees the cursor? Or do we stick to other tags and recreate this behavior from scratch?

Clearing the Internet, I did not find a solution. JQuery solutions are acceptable.

Answer 1

, , |. , .

HTML

<input id="cursor" type="text">

JS

window.setInterval(function(){
  input=$("#cursor")

  if(!input.is(":focus") && (input.val()=='' || input.val()=='|')){
      if(input.val()==''){input.val("|");}
      else if(input.val()=='|'){input.val("");}

  }
  else{}
}, 500);