Cita:
Iniciado por rodrigo791 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>