[SOLUCIONADO] Alerta cuando excede cantidad de letras en el input

MasterJose · #1 (**permalink**) 13/06/2013, 10:03

Buenas queria hacer saltar una alarma cuando detectara que la cantidad de letras en el input text es mayor que X, hago lo siguiente:

http://jsfiddle.net/Cronos83/pRtWX/

pero no funciona.

Alguna idea?

Gracias!

maycolalvarez · #2 (**permalink**) 13/06/2013, 10:18

eso es porque no se lo añades a ningún evento concerniente al objeto, como keypress, keydown o keyup.

además existe el atributo HTML maxlegth

http://www.w3schools.com/tags/att_input_maxlength.asp

MasterJose · #3 (**permalink**) 14/06/2013, 03:34

Cita:

Iniciado por maycolalvarez

eso es porque no se lo añades a ningún evento concerniente al objeto, como keypress, keydown o keyup.

además existe el atributo HTML maxlegth

http://www.w3schools.com/tags/att_input_maxlength.asp

Bueno mi finalidad no es que se pueda introducir un numero determinado de caracteres.

Lo que quiero hacer es:

Tener un cuadro de texto donde si se introduce al menos un caracter, aparezca un desplegable de X cosas.

Es por eso que quiero detectar en el input text la cantidad de caracteres que hayan, pensando en que si solo hay uno pues actuare en consecuencia haciendo que aparezca un desplegable.

MasterJose · #4 (**permalink**) 17/06/2013, 02:43

Nadie? Creo que es sencillo pero yo no estoy muy puesto.....
:/

jrobinsonc · #5 (**permalink**) 17/06/2013, 10:34

Imagino que con "desplegable" te refieres a que quieres que aparezca una lista desplegable debajo del campo.

Si es así, te recomiendo usar jQuery Autocomplete. En la siguiente URL hay un ejemplo funcional de como usarlo: http://jqueryui.com/autocomplete/

Y en cuanto al código que hiciste, aquí puedes ver una versión funcional:
http://jsfiddle.net/jrobinsonc/pRtWX/1/

Código Javascript:

Ver original$(document).ready(function(){
    $("#nombre").on('keyup', function(){
        
        if($(this).val().length > 3) {
          alert("Es mayor que 3!!");
        }
    });       
});

MasterJose · #6 (**permalink**) 18/06/2013, 02:28

Cita:

Iniciado por jrobinsonc

Imagino que con "desplegable" te refieres a que quieres que aparezca una lista desplegable debajo del campo.

Si es así, te recomiendo usar jQuery Autocomplete. En la siguiente URL hay un ejemplo funcional de como usarlo: http://jqueryui.com/autocomplete/

Y en cuanto al código que hiciste, aquí puedes ver una versión funcional:
http://jsfiddle.net/jrobinsonc/pRtWX/1/

Código Javascript:

Ver original$(document).ready(function(){
    $("#nombre").on('keyup', function(){
        
        if($(this).val().length > 3) {
          alert("Es mayor que 3!!");
        }
    });       
});

Gracias.Queria saber el codigo para que hicera eso.

En cuanto al desplegable.

Imagina que tengo un input=text, lo que busco es que cuando el usuario escriba un caracter en el mismo, aparezca un select.

Mira en este ejemplo, como veras aparecen los 2 campos a la vez, lo que yo quiero es que solo aparezca el imput y cuando el usuario introduzca tan solo un caracter aparezca o se haga visible el 2do campo(el del select): http://jsfiddle.net/Cronos83/kuUuV/

kikerrobles · #7 (**permalink**) 18/06/2013, 04:41

Para lo que quieres hacer se podría hacer así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script type="text/javascript" src="../js/functions_validate.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../js/jquery-2.0.2.min.js">\x3C/script>')</script>
        <title>Registro</title>
        <style>
            
            #marca{
    visibility: hidden;
}
        </style>
    </head>
    <body>
        <script>
$(document).ready(function(){
    
  var campo=$('#campo');
  var select=$('#marca');
    campo.keyup(function(){
     var longitud=campo.val().length;
        if (longitud)//aquí puedes hacer variaciones en función de la longitud del campo
            select.css('visibility','visible');
        else
            select.css('visibility','hidden');
    });
    
});
        </script>
       
<input id="campo" type="text" name="fname"><br>
 
<select id="marca">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </body>
</html>

Espero que te sirva

MasterJose · #8 (**permalink**) 18/06/2013, 09:08

Cita:

Iniciado por kikerrobles

Para lo que quieres hacer se podría hacer así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script type="text/javascript" src="../js/functions_validate.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../js/jquery-2.0.2.min.js">\x3C/script>')</script>
        <title>Registro</title>
        <style>
            
            #marca{
    visibility: hidden;
}
        </style>
    </head>
    <body>
        <script>
$(document).ready(function(){
    
  var campo=$('#campo');
  var select=$('#marca');
    campo.keyup(function(){
     var longitud=campo.val().length;
        if (longitud)//aquí puedes hacer variaciones en función de la longitud del campo
            select.css('visibility','visible');
        else
            select.css('visibility','hidden');
    });
    
});
        </script>
       
<input id="campo" type="text" name="fname"><br>
 
<select id="marca">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </body>
</html>

Espero que te sirva

Muy bueno. Funciona correctamente.

¡¡¡GraciaS!!!

Dejo aquí mismo tu solución pero para que se pueda ver visualmente por si alguien quiere: http://jsfiddle.net/Cronos83/7PCTm/