Input de dos lineas o Textarea de una

salbatore · #1 (**permalink**) 16/11/2011, 21:38

Hola a todos,

Estoy haciendo un sistema de correo, y me estoy volviendo loco para hacer el sistema para incluir los contactos cuando envias un mail. Que conste que me estoy volviendo loco por querer hacerlo de una forma, puras manias.

El caso es que tengo un input donde se escriben los emails, pero cuando son muchos quiero que se cree otra linea. Para eso evidentemente he cambiado el input por un textarea, mi problema viene con que el textarea en Firefox (por lo menos) no permite tener una sola linea. Es decir... que me pone dos como poco.

Vamos... que el textarea el rows="1" lo interpreta como dos lineas, rows="0" tambien. Estoy volviendome tan majareta que estoy pensando hacer un iframe editable, pero la verdad es que no me apetece nada para algo tan sencillo.

No me extraña que Gmail lo tenga tan feo, jojo.

¿Se os ocurre algo, que no sea no sea con javascript?

maycolalvarez · #2 (**permalink**) 17/11/2011, 06:52

puedes intentar ajustar el tamaño del textarea con CSS

salbatore · #3 (**permalink**) 17/11/2011, 20:03

Si, el problema es que la altura del texto, el font-size, es variable...

Se os curre otra forma?

emprear · #4 (**permalink**) 17/11/2011, 20:30

no entiendo el concepto
Un textarea de una sola linea? pero cuando se agreguen otros email, que haya mas líneas?
Al margen, posés tener un textarea de 1 linea tanto en firefox como en el resto, probá lo siguiente

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
textarea{
width: 300px;
height: 13px;
line-height: 13px;
font-size: 13px;
resize: none;
overflow: hidden; /* fix ie */
}
/*]]>*/
</style>
</head>
<body>
<textarea cols="1" rows="1"></textarea>
</body>
</html>

También podés usar algo como esto
http://jacklmoore.com/autosize/

Saludos

IsaBelM · #5 (**permalink**) 18/11/2011, 06:39

no veo el problema de crear un textarea de una sola fila

en caso que no quieras usar jquey

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var nuevaFila = {

Evento: function (elemento,nomevento,funcion) {
if (elemento.attachEvent)
{
var f=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,f);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,false) ;
return true;
}
else
return false;
},

init: function(){
var elem = document.getElementById("txt");
nuevaFila.Evento(elem, 'keyup', nuevaFila.CreaFila);
},

CreaFila: function (ev) {
var num_caracteresIrreales;
var num_caracteresReales;
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
var elem = document.getElementById("txt");
num_caracteresIrreales = elem.rows * 26;
num_caracteresReales = elem.value.length;
document.getElementById("irr").innerHTML = num_caracteresIrreales;
document.getElementById("real").innerHTML = num_caracteresReales;

if (keyCode == 8) {
if ((num_caracteresReales < (num_caracteresIrreales-26)) && (elem.rows >=2)) {
elem.rows-= 1;
}

} else if (num_caracteresReales == num_caracteresIrreales) {
elem.rows+= 1;

} else if (keyCode == 13) {
elem.rows+= 1;
num_caracteresIrreales = 26;
num_caracteresReales = 0;
}
}
}
nuevaFila.Evento(window, 'load', nuevaFila.init);
</script>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="1" style="overflow:hidden;"></textarea>
Salto linea <span id="irr">0</span> Caracteres <span id="real">0</span>
</body>
</html>

salbatore · #6 (**permalink**) 18/11/2011, 11:14

Hola,

Muchas gracias por los codigos!... joer... era por no usar el style="overflow:hidden;", y eso que lo he usado pero con el firebug. Nunca me habia pasado, pero si le das a un textarea la propiedad style="overflow:hidden;" desde el firebug, no la reproduce del mismo modo que si recargas con esa propiedad.

Muchas gracias a todos!... tambien me valdran los scripts... gracias!