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(); 
});

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

Answer 2

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

相反

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

Demo

Answer 3

使用事件监听器可以执行类似

的操作

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

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

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

    } else {

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

    }

});

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

将重点放在输入字段上

3 个答案: