Elementos dentro de campos de formulario

patilanz · #1 (**permalink**) 25/02/2013, 15:24

Hola hay alguna manera de poner elementos dentro de un input o una textarea?
Algo así como :

<input type="text" value="<font color='red'>contenido</font><font color='blue'>cosa</font>" />

O de textarea:

<textarea><font color="red">contenido</font></textarea>

He leído sobre que se pueden usar frames para este fin pero no tengo ni idea de como hacerlo.

Triby · #2 (**permalink**) 25/02/2013, 16:53

Hay algunos editores en Javascript que te permiten incluir HTML en tus campos o áreas de texto, como TinyMCE, CKEditor y muchos otros.

Ahora, lo más importante es que debes codificar ese texto para poder incluirlo en el campo, ejemplo:

Código HTML:

Ver original<input type="text" value="&lt;font color=&quote;red&quote;&gt;contenido&lt;/font&gt;" />

Si lo estás haciendo desde php puedes usar htmlentities()

patilanz · #3 (**permalink**) 26/02/2013, 00:49

Cita:

Iniciado por Triby

Hay algunos editores en Javascript que te permiten incluir HTML en tus campos o áreas de texto, como TinyMCE, CKEditor y muchos otros.

Ahora, lo más importante es que debes codificar ese texto para poder incluirlo en el campo, ejemplo:

Código HTML:

Ver original<input type="text" value="&lt;font color=&quote;red&quote;&gt;contenido&lt;/font&gt;" />

Si lo estás haciendo desde php puedes usar htmlentities()

Hola voy a revisar los editores pero a mi lo primero que se me ocurrio ya que en mi caso no necesito opciones arriba para hacer tablas y algo parecido sino simplemente por ejemplo cuando el usuario escriba un correo colorear la parte antes del @ la parte despues del @ y la parte despues del .

Lo que intento hacer es que al dar click con el botón en un div este se esconde y aparece el input donde se puede escribir, después al quitar el foco aparece el div y le asigno el texto del input pero con las etiquetas para dar el color.

Lo de los editores no me gusta mucho ya que es como jquery te lo dan todo hecho y tu solo tienes que copar lo. Pues no aprendes nada.
Si me puedes decir como lo hacer estos editores

patilanz · #4 (**permalink**) 26/02/2013, 08:42

Aquí hice un ejemplo de lo que se me ocurrió, pero el problema esta cuando estas escribiendo, el efecto no se ve. No se como lo hacen los editores como CKEditor(los que nombro Triby).
Alguien lo sabe?

emprear · #5 (**permalink**) 26/02/2013, 10:55

Convengamos primero que crear tu propio editor no es muy sencillo

Primero una aclaración, un textarea trata al código html como texto, así que no tendrías que utilizar necesariamente entidades html, salvo que si no lo hacés no te validaría como xhtml, por lo tanto si usas html sin convertirlo a entidades en el textarea, deberías utilizar el doctype de html5, con lo cual te validaría.

Con respecto a colorear un email, puede resolverse facilmente con un split() de javascript, claro que un editor supuestamente puede contener cosas bastante más complejas, por lo habría que utilizar métodos más complejos, expresiones regulares, etc.

Te dejo una demo, pero cuidado que el coloreado solo sirve para emails del tipo
[email protected], si hubiese más puntos en el email, p. ej [email protected], ya no te serviría

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function pasarAlDiv(ta){
var v = document.getElementById(ta).value;
document.getElementById('resultados').innerHTML =v;
}
 
function colorear(){
var v = document.getElementById('email').value;
var a = v.split('@');
var b = a[1].split('.');
document.getElementById('resultados').innerHTML ="<span style='color: red'>" + a[0] + "</span>@<span style='color: green'>" + b[0] +"</span>.<span style='color: navy'>"+ b[1] +"</span>";
}
//]]>
</script>
</head>
<body>
<p>Editor 1</p>
<textarea cols="60" rows="3" id="editor1">
&lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
Contenido de div en textarea
&lt;/div&gt;
</textarea>
<button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
<p>Editor 2</p>
<textarea cols="60" rows="3" id="editor2">
<div style="background: orange; width: 100px; height: 100px;">
Contenido de div en textarea
</div>
</textarea>
<button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
<p>Colorear</p>
<form>
<input type="text" value="[email protected]" id="email" size="50" />
<input type="button" onclick="colorear();" value="Colorear" />
</form>
<p>Div resultados</p>
<div id="resultados"></div>
</body>
</html>

Notá que un textarea tiene entidades y el otro no

Saludos

patilanz · #6 (**permalink**) 26/02/2013, 11:30

Cita:

Iniciado por emprear

Convengamos primero que crear tu propio editor no es muy sencillo

Primero una aclaración, un textarea trata al código html como texto, así que no tendrías que utilizar necesariamente entidades html, salvo que si no lo hacés no te validaría como xhtml, por lo tanto si usas html sin convertirlo a entidades en el textarea, deberías utilizar el doctype de html5, con lo cual te validaría.

Con respecto a colorear un email, puede resolverse facilmente con un split() de javascript, claro que un editor supuestamente puede contener cosas bastante más complejas, por lo habría que utilizar métodos más complejos, expresiones regulares, etc.

Te dejo una demo, pero cuidado que el coloreado solo sirve para emails del tipo
[email protected], si hubiese más puntos en el email, p. ej [email protected], ya no te serviría

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function pasarAlDiv(ta){
var v = document.getElementById(ta).value;
document.getElementById('resultados').innerHTML =v;
}
 
function colorear(){
var v = document.getElementById('email').value;
var a = v.split('@');
var b = a[1].split('.');
document.getElementById('resultados').innerHTML ="<span style='color: red'>" + a[0] + "</span>@<span style='color: green'>" + b[0] +"</span>.<span style='color: navy'>"+ b[1] +"</span>";
}
//]]>
</script>
</head>
<body>
<p>Editor 1</p>
<textarea cols="60" rows="3" id="editor1">
&lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
Contenido de div en textarea
&lt;/div&gt;
</textarea>
<button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
<p>Editor 2</p>
<textarea cols="60" rows="3" id="editor2">
<div style="background: orange; width: 100px; height: 100px;">
Contenido de div en textarea
</div>
</textarea>
<button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
<p>Colorear</p>
<form>
<input type="text" value="[email protected]" id="email" size="50" />
<input type="button" onclick="colorear();" value="Colorear" />
</form>
<p>Div resultados</p>
<div id="resultados"></div>
</body>
</html>

Notá que un textarea tiene entidades y el otro no

Saludos

Gracias por tu respuesta pero lo que me decís ya lo se. Lo que necesito es que se coloree dentro del input o textarea y no en una div. Y no he dicho que es fácil hacer lo que pido, solo si me podéis orientar y yo lo intentare hacer, no tengo problema en hacer algo mas complejo.

Saludos

emprear · #7 (**permalink**) 26/02/2013, 12:02

http://www.strangeplanet.fr/work/jqu...lighttextarea/