javascript - 将焦点固定在输入字段上

Question

有没有办法将焦点固定在输入字段上，直到用户输入 4 个字符？我需要它的原因是因为我的文本区域没有背景(风格目的)如果用户点击我页面上的随机位置，许多用户将很难找到文本区域。

这是我的文本字段和按钮

<div id="inputtext">
      <input type="text" id="dreamtext" autofocus/>
      <input type="submit" id="nextstepbutton" value="next step" onclick="window.open('step3.html','_self','resizable=yes')" />
    </div>

我已经在执行一些脚本，当文本字段中的字符少于 4 个时，这些脚本会隐藏按钮并更改一些 div。如果我也能在这个脚本中实现永久焦点，那就太好了。

$(function(){
     $("#nextstepbutton").hide();

     $("#dreamtext").keyup(function() {
         var val = $(this).val();
         if (val.length > 3) {
             $('#nextstepbutton').show();
             document.getElementById("message").innerHTML = "<h1>press 'enter' key or next step</h1>";
         }
         else {
             $('#nextstepbutton').hide();
             document.getElementById("message").innerHTML = "<h1>type please</h1>";
         }

     });
});

谢谢。

Answer 1

使用blur()，与focus()相反...

$('#dreamtext').on('blur',function(){
   if (this.value.length < 4) this.focus();
});

Demo