Question

我试图将焦点始终放在一个表单字段上。它基本上需要始终在页面上处于活动状态，因此如果输入任何内容，它总是在此字段中。我该如何做到这一点？我已经使用了HTML5中的autofocus命令，但是一旦我切换它就不会在没有页面刷新的情况下返回。基本上我希望光标被强制始终保持在那个表单字段中？

<input type="text" placeholder="Type Here" id="forced" required autofocus>

这一切都必须在客户端控制，因此只能使用HTML5和Javascript。有解决方案吗？

Answer 1

这将做你想做的事情。我正在听blur事件并在输入发生时重新聚焦输入。如果您不希望jQuery的开销如此简单，那么这里是简单的javascript。

var alwaysFocusedInput = document.getElementById( "focus_target" );

alwaysFocusedInput.addEventListener( "blur", function() {
  setTimeout(() =>{
    alwaysFocusedInput.focus();
  }, 0);
});

<input type="text" id="focus_target" placeholder="always focused" autofocus />
<input type="text" placeholder="some other input" />

您可以将alwaysFocusedInput.focus();放在脚本的末尾，如@ 3D1TOR建议的那样。

或者，如果你想支持真正的旧版Firefox：

尝试使用此脚本我发现here位于旧版Firefox的body元素的底部。

<script>
    if (!("autofocus" in document.createElement("input"))) {
        document.getElementById("focus_target").focus();
    }
</script>

Answer 2

你可以试试这个..

$("#forced").blur(function(){
      $(this).focus();       
});

Answer 3

当非元素的任何东西聚焦时，聚焦元素。

$(":not('#forced')").focus(function(){
  $("#forced").focus();       
});

Answer 4

function autoFocus() 
{
    inputTxt = document.getElementById("forced").autofocus;    
}
autoFocus();

如何使用HTML5 / Javascript强制光标始终位于一个表单字段中？

4 个答案: