Javascript 将焦点固定在输入字段上

有没有办法将焦点固定在输入字段上，直到用户输入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>";
         }

     });
});

$（函数（）{
$（“#下一步按钮”）.hide（）；
$（“#dreamtext”）.keyup（函数（）{
var val=$（this.val（）；
如果（值长度>3）{
$（“#下一步按钮”）.show（）；
document.getElementById（“message”）.innerHTML=“按“回车”键或下一步”；
}
否则{
$（“#下一步按钮”）.hide（）；
document.getElementById（“message”）.innerHTML=“请键入”；
}
});
});

谢谢

document.getElementById('dreamtext').addEventListener('blur', function() {
    this.value.length > 3 || this.focus(); 
});

---

使用事件。它会在焦点丢失时触发。

使用事件侦听器，您可以执行以下操作

 $('#textbox').change(function(){

    if ( $(this).val().length <= 4 ) {

        $(this).css('border', '1px solid orange');

    } else {

        $(this).css('border', '0');

    }

});

$（'#textbox'）。更改（函数（）{
如果（$（this）.val（）.length使用
blur（）
，则与
focus（）
相反

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

$（'#dreamtext'）。在（'blur'，function（）上{
如果（this.value.length<4）this.focus（）；
});

@bjb568绑定大量事件不是一个好主意。更好的方法是使用
blur（）
。检查我的anwserNice，这甚至更好。非常感谢。你应该首先避免产生这样的问题。如果解决方案可行，将用户锁定在字段中会产生新问题。