输入元素的光标可能没有焦点吗？

Question

好的，这是一个独特的场景。

这是一个Web应用程序，无法在任何地方访问，而是在机顶盒上。此应用程序的外围设备是电视遥控器。

即：没有键盘，没有鼠标。

当然，通常，当一个输入元素被聚焦时，一个光标出现并在当前位置闪烁。您键入字符，它们就会出现，并且光标会自动前进。hoo！

但是我们需要做的是在输入元素未集中时复制该行为。

这种现象主要出现在视频游戏和其他电视/大屏幕界面中。您有一个屏幕键盘，可以通过导航到字母或数字并按Enter / select或该平台的“选择”按钮（例如Playstation上的“ X”按钮）来选择字符。该字母显示在输入字段中，cursor前进，但是带有焦点的实际元素是屏幕键盘上的当前键。

我们尝试使用<div>标签制作键盘，但是随后我们失去了非常方便的placeholderattr 的行为，并且重新创建a cursor和placeholder应该执行的操作只是一堆逻辑。我希望cursor始终在最后一个字符之后，在输入元素上添加to，并且在输入没有值时不显示，仅显示placeholder="Search"。几乎听起来，我需要能够在页面上具有焦点的两个元素，据我所知这是不可能的。

但是，是否有可能使输入元素没有集中并且仍然看到光标？还是我们坚持使用其他标签并从头开始重新创建该行为？

搜寻互联网时，我没有找到解决方案。jQuery解决方案是可以接受的。

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