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

Question

Okay so this is a unique scenario.

This is a web app that is not accessed anywhere but on a set top box. The peripheral for this application is a TV remote control.

i.e: NO keyboard, NO mouse.

Of course normally, when an input element is focused, a cursor appears and blinks at the current position. You type characters, they show up, and the cursor automagically advances. whoohoo!

But what we need to do is replicate that behavior when the input element is not focused.

This behavior is seen mostly in video games and other TV/large screen interfaces. You have an onscreen keyboard and you choose characters by navigating to a letter or number and hitting enter/select or whatever button is "select" for that platform (like maybe the 'X' button on a Playstation). The letter shows up in the input field, the cursor advances, but the actual element with focus is the current key on the onscreen keyboard.

We tried making the keyboard using <div> tags, but then we lose the behavior of the very convenient placeholder attr, and it is just a mess of logic recreating what a cursor and placeholder should do. I would love for the cursor to ALWAYS be on an input element, just after the last character, and NOT present when the input has no value, showing only placeholder="Search". Almost sounds like I need to be able to have two elements on a page with focus, which is not possible as far as I know.

But is it possible to have an input element not focused and still see a cursor? Or are we stuck using other tags and recreating that behavior from scratch?

Scouring the internet, I have found no solution. jQuery solutions are acceptable.

Answer 1

I don't know if I understand your question right but you could simulate a cursor with the | character. I put together a quick example that may help you.

example fiddle

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);