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

Question

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

这是一个网络应用程序，只能在机顶盒上访问。此应用程序的外围设备是电视 遥控器 。

即：无键盘，无鼠标。

当然正常情况下，当输入元素被聚焦时，光标会出现并在当前位置闪烁。您键入字符，它们会显示出来，然后光标自动前进。哇哦！

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

此行为主要出现在视频游戏和其他 TV/large 屏幕界面中。你有一个屏幕键盘，你可以通过导航到一个字母或数字并点击 enter/select 或该平台的 "select" 按钮来选择字符（比如 Playstation 上的 'X' 按钮）。该字母显示在输入字段中，cursor 前进，但实际具有焦点的元素是屏幕键盘上的当前键。

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

但是是否可以让输入元素未聚焦但仍能看到光标？或者我们是否坚持使用其他标签并从头开始重新创建该行为？

网上一搜，没有找到解决办法。 jQuery 解决方案是可以接受的。

Answer 1

我不知道我是否理解你的问题，但你可以用 | 字符模拟一个光标。我整理了一个可能对您有帮助的简单示例。

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

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

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

html

javascript

jquery

television