Fix focus on input field

Question

Is there a way to fix a focus on input field until, say, user enters 4 characters? The reason I need it is because i don't have a background for my text area (stylistic purpose) and if user clicks on a random place on my page it will be hard for many users to locate the text area.

Here is my text field and button

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

I already have some scripts going on which hides the button and changes some div when there are less then 4 characters in text field. It would be super great if I could also implement permanent focus in this script.

$(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>";
         }

     });
});

Thanks.

Answer 1

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

Use the blur event. It triggers when focus is lost.

Answer 2

use blur() , the opposite of focus() ...

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

Demo

Answer 3

Using a event listener you could do something like

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

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

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

    } else {

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

    }

});

When the user initially clicks the box it'll have a 'orange' border until it has 4 or more characters, indicating it needs attention.