專注於輸入字段

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個或更多字符為止，表示需要注意。