Ver Mensaje Individual
  #3 (permalink)  
Antiguo 12/01/2013, 17:19
eridamega
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Crear un formulario web con limite de 25 caracreres

Cita:
Iniciado por rodrigo791 Ver Mensaje
Y tienes algo hecho? por acá no hacemos trabajos por otros a demas de que tampoco se entiende mucho lo que queres, necesitas un formulario, donde la persona selecciona palabras, selecciona simbolos y a su vez esos simbolos se introducen de nuevo en el formulario? no entendí nada eso.
Si claro ya tengo hecho el formulario, lo que necesito es que no deje escribir mas de 25 caracteres y debajo de input me diga los caracteres que faltan para los 25, ejemplo si he escrito 4 que diga faltan 21
Código HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
	ul>li{
		list-style-type: none;
		display: inline;
	}
	li>div{
		display: inline;
	}
	#contSimbolos{
		height: 80px;
		background-color: blanchedAlmond;
		overflow: auto;
		width: 470px;
	}
</style>
</head>
<body>
<form>
<input type="text" maxlength="25" id="texto" placeholder="Seleccione Simbolos" name="texto" style="font-family:Verdana;text-align:center;
font-size:18pt; color:#0000FF; background-color:#00FFFF" size=25>
<ul>
<li><div id="sim1" style="cursor: pointer;"></div></li>
<li><div id="sim2" style="cursor: pointer;"></div></li>
<li><div id="sim3" style="cursor: pointer;"></div></li>
<li><div id="sim4" style="cursor: pointer;"></div></li>
<li><div id="sim5" style="cursor: pointer;"></div></li>
<li><div id="sim6" style="cursor: pointer;"></div></li>
<li><div id="sim7" style="cursor: pointer;"></div></li>
<li><div id="sim8" style="cursor: pointer;"></div></li>
<li><div id="sim9" style="cursor: pointer;"></div></li>
</ul>

<script>
var open = false;
$('#contSimbolos').click(function() {
    if (open) {
        $(this).animate({height:'100px'}); 
    }
    else {
        $(this).animate({height:'150px'});
    }
    open = !open;
});

</script>
<script>
$(document).ready(function(){
$("#sim1").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim1").text();
input.val( input.val() + simbolo );	
});

$("#sim2").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim2").text();
input.val( input.val() + simbolo );	
});

$("#sim3").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim3").text();
input.val( input.val() + simbolo );	
});

$("#sim4").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim4").text();
input.val( input.val() + simbolo );	
});

$("#sim5").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim5").text();
input.val( input.val() + simbolo );	
});

$("#sim6").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim6").text();
input.val( input.val() + simbolo );	
});

$("#sim7").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim7").text();
input.val( input.val() + simbolo );	
});

$("#sim8").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim8").text();
input.val( input.val() + simbolo );	
});

$("#sim9").click(function(){
var input = $( "#texto" );
var simbolo = $("#sim9").text();
input.val( input.val() + simbolo );	
});


});
</script>
</form>	
</body>
</html>