表示警告

Question

私が達成しようとしているもの：

1）ユーザーは、プレースホルダのプレースホルダとマウスの葉で3文字以上を入力した場合、プレースホルダ

2）の上に置きました>ユーザが3未満にプレースホルダの文字を削除した場合

3）#alertディスプレイは>警告隠す

jQuery('#mydiv').after('<span id="alert">alert</span>'); 
 
jQuery('#myinput').mouseleave(function() { 
 
    jQuery('#alert').toggle(this.value !== ''); 
 
});

#alert { 
 
    display: block; 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="mydiv"> 
 
    <input id="myinput" placeholder=""> 
 
</div>

Answer 1

は、長さ3 <場合inputに警告

を表示し、その後、入力の長さを確認し、警告を非表示にします。

$('#mydiv').after('<span id="alert">alert</span>'); 
 

 
$('#myinput').mouseleave(function() { 
 
    if(this.value.length >= 3) $('#alert').show() 
 
}); 
 

 
$('#myinput').on('input', function(){ 
 
    if(this.value.length < 3) $('#alert').hide(); 
 
})

#alert { 
 
    display: block; 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="mydiv"> 
 
    <input id="myinput" placeholder=""> 
 
</div>

Answer 2

$('#myinput').on('input', function() { 
 
    if (this.value.length < 3) { 
 
     $('#alert').hide(); 
 
    } else { 
 
     $('#alert').show(); 
 
    } 
 
})

#alert { 
 
    display: none; 
 
    color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="mydiv"> 
 
    <label>Value: </label> 
 
    <input id="myinput" placeholder="Enter Value"> 
 
    <span id="alert">Value must be less than three</span> 
 
</div>

この情報がお役に立てば幸い！