Lo que estoy tratando de lograr:

1) el usuario se desplaza sobre el marcador de posición

2) si el usuario escribió más de 3 caracteres en el marcador de posición y las hojas del ratón del marcador de posición> mostrar # alerta

3) si el usuario elimina los caracteres en el marcador de posición a menos de 3> ocultar alerta

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>
1
benua 6 sep. 2017 a las 19:40

2 respuestas

La mejor respuesta

Verifique la longitud de la entrada, luego muestre la alerta

En input si la longitud <3, oculta la alerta.

$('#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>
1
Dalin Huang 6 sep. 2017 a las 16:55
$('#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>

¡Espero que esto ayude!

0
6 sep. 2017 a las 17:10