输入元素是否可以使光标没有焦点?

时间:2015-01-06 19:34:25

标签: javascript jquery html television

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

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

即:没有键盘没有鼠标

当然,通常情况下,当输入元素被聚焦时,光标会出现并在当前位置闪烁。您键入字符,它们显示,光标自动前进。 whoohoo!

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

此行为主要出现在视频游戏和其他电视/大屏幕界面中。你有一个屏幕键盘,你可以通过导航到一个字母或数字来选择字符,然后点击输入/选择或者选择该平台的任何按钮(比如Playstation上的'X'按钮)。字母显示在输入字段中,cursor前进,但具有焦点的实际元素是屏幕键盘上的当前键。

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

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

搜索互联网,我找不到任何解决方案。 jQuery解决方案是可以接受的。

1 个答案:

答案 0 :(得分:3)

我不知道我是否理解您的问题,但您可以使用|字符模拟光标。我汇总了一个可以帮助你的快速示例。

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