专注于输入字段

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

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

使用模糊事件。 失去焦点时触发。

Answer 2

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

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

演示

Answer 3

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

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

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

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

    } else {

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

    }

});

当用户最初单击该框时，它将具有“橙色”边框，直到它具有4个或更多字符为止，表示需要注意。