Foros del Web » Creando para Internet » HTML »

Elementos dentro de campos de formulario

Estas en el tema de Elementos dentro de campos de formulario en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/02/2013, 14:24
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 7 años, 9 meses
Puntos: 29
Elementos dentro de campos de formulario

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.
  #2 (permalink)  
Antiguo 25/02/2013, 15:53
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.956
Antigüedad: 11 años, 2 meses
Puntos: 2184
Respuesta: Elementos dentro de campos de formulario

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
  1. <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()
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 25/02/2013, 23:49
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 7 años, 9 meses
Puntos: 29
Respuesta: Elementos dentro de campos de formulario

Cita:
Iniciado por Triby Ver Mensaje
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
  1. <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
  #4 (permalink)  
Antiguo 26/02/2013, 07:42
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 7 años, 9 meses
Puntos: 29
Respuesta: Elementos dentro de campos de formulario

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?
  #5 (permalink)  
Antiguo 26/02/2013, 09:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 3 meses
Puntos: 1567
Respuesta: Elementos dentro de campos de formulario

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
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function pasarAlDiv(ta){
  9. var v = document.getElementById(ta).value;
  10. document.getElementById('resultados').innerHTML =v;
  11. }
  12.  
  13. function colorear(){
  14. var v = document.getElementById('email').value;
  15. var a = v.split('@');
  16. var b = a[1].split('.');
  17. 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>";
  18. }
  19. //]]>
  20. </head>
  21. <p>Editor 1</p>
  22. <textarea cols="60" rows="3" id="editor1">
  23. &lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
  24. Contenido de div en textarea
  25. &lt;/div&gt;
  26. <button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
  27. <p>Editor 2</p>
  28. <textarea cols="60" rows="3" id="editor2">
  29. <div style="background: orange; width: 100px; height: 100px;">
  30. Contenido de div en textarea
  31. </div>
  32. <button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
  33. <p>Colorear</p>
  34. <input type="text" value="[email protected]" id="email" size="50" />
  35. <input type="button" onclick="colorear();" value="Colorear" />
  36. </form>
  37. <p>Div resultados</p>
  38. <div id="resultados"></div>
  39. </body>
  40. </html>

Notá que un textarea tiene entidades y el otro no

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 26/02/2013, 10:30
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 7 años, 9 meses
Puntos: 29
Respuesta: Elementos dentro de campos de formulario

Cita:
Iniciado por emprear Ver Mensaje
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
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function pasarAlDiv(ta){
  9. var v = document.getElementById(ta).value;
  10. document.getElementById('resultados').innerHTML =v;
  11. }
  12.  
  13. function colorear(){
  14. var v = document.getElementById('email').value;
  15. var a = v.split('@');
  16. var b = a[1].split('.');
  17. 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>";
  18. }
  19. //]]>
  20. </head>
  21. <p>Editor 1</p>
  22. <textarea cols="60" rows="3" id="editor1">
  23. &lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
  24. Contenido de div en textarea
  25. &lt;/div&gt;
  26. <button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
  27. <p>Editor 2</p>
  28. <textarea cols="60" rows="3" id="editor2">
  29. <div style="background: orange; width: 100px; height: 100px;">
  30. Contenido de div en textarea
  31. </div>
  32. <button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
  33. <p>Colorear</p>
  34. <input type="text" value="[email protected]" id="email" size="50" />
  35. <input type="button" onclick="colorear();" value="Colorear" />
  36. </form>
  37. <p>Div resultados</p>
  38. <div id="resultados"></div>
  39. </body>
  40. </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
  #7 (permalink)  
Antiguo 26/02/2013, 11:02
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 3 meses
Puntos: 1567
Respuesta: Elementos dentro de campos de formulario

http://www.strangeplanet.fr/work/jqu...lighttextarea/
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: campos, elementos, formulario, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:38.