Tema: Editar texto con JS y HTML
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 27/07/2016, 15:48
alvaro_trewhela
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Editar texto con JS y HTML
Ve con algo como esto a modo de ayuda:
Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.         function accion(){
  5.         var box1 = document.getElementById("box1");
  6.         var box2 = document.getElementById("box2");
  7.         
  8.         box2.value=box1.value;
  9.         
  10.         var tipo = document.getElementById("tipo").value;
  11.         var size = document.getElementById("size").value;
  12.         var effect = document.getElementById("effect").value;
  13.         
  14.         box2.style.fontFamily=tipo;
  15.         box2.style.fontSize=size+"px";
  16.         
  17.             if(effect == "bold"){
  18.             box2.style.fontStyle="normal";
  19.             box2.style.fontWeight="bold";
  20.             }
  21.             else if(effect == "italic"){
  22.             box2.style.fontWeight="normal";
  23.             box2.style.fontStyle="italic";
  24.             }
  25.             else{
  26.             box2.style.fontWeight="normal";
  27.             box2.style.fontStyle="normal";  
  28.             }
  29.         }
  30.         </script>
  31.     </head>
  32.     <body>
  33.     
  34.         <textarea id="box1"></textarea>
  35.         
  36.         <br/><br/>
  37.         Tipo: <select id="tipo">
  38.             <option value="Arial">Arial</option>
  39.             <option value="Calibri">Calibri</option>
  40.             <option value="Comic Sans MS">Comic</option>
  41.         </select>
  42.         
  43.          Tamaño: <select id="size">
  44.             <option value="12">12</option>
  45.             <option value="18">18</option>
  46.             <option value="24">24</option>
  47.         </select>
  48.         
  49.         <select id="effect">
  50.             <option value="normal">normal</option>
  51.             <option value="italic">cursiva</option>
  52.             <option value="bold">negrita</option>
  53.         </select>
  54.         
  55.          <input type="button" value="GO!!" onclick="accion();" />
  56.         
  57.         <br/><br/>
  58.         
  59.         <textarea id="box2"></textarea>
  60.     
  61.     
  62.     </body>
  63. </html>
Última edición por alvaro_trewhela; 27/07/2016 a las 20:47