Tema: Postear en campo de texto
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 13/04/2011, 12:29
saul123
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 13 años, 1 mes
Puntos: 9
Respuesta: Postear en campo de texto
Hola moradazo


Te dejo un ejemplo , quiza esto te sirve es con jquery en el ejemplo que pongo puedes ver el scrip que necesitas y el HTML Y CSS


Puedes ver el ejemplo aqui vista previa con impust o textareas
Código HTML: 
Ver original
  1. <body>
  2.   <div id="container">
  3.   <h1>Ejemplo de vista previa en inputs</h1>
  4.  
  5.       <div class="field-section">
  6.         <div class="fila">
  7.           <label class="labelText">Cabecera</label>
  8.           <textarea class="textbox"   name="title" id="title" value=""></textarea>
  9.         </div>
  10.         <div class="fila">
  11.           <label class="labelText">Linea descriptiva 1</label>
  12.           <textarea class="textbox" type="text" name="description" id="description" value=""></textarea>
  13.         </div>
  14.         <div class="fila">
  15.           <label class="labelText">URL Visible</label>
  16.           <textarea class="textbox"  type="text" name="url_visible" id="url_visible" value=""></textarea>
  17.         </div>
  18.       </div>
  19.  
  20.       <div class="preview-section">
  21.         <div class="preview" >
  22.           <textarea class="resp" id="preview_title" >Titulo</textarea>
  23.           <textarea class="resp" id="preview_description">descripcion</textarea>
  24.           <textarea class="resp" id="preview_url_visible" >http://tusitio.com</textarea>
  25.         </div>
  26.       </div>
  27. </div>
  28.  
  29.   </body>
Código CSS: 
Ver original
  1. body{
  2.     font-family: Arial, Helvetica, sans-serif;
  3. }
  4.     #container{
  5.         background:#333;
  6.         width:1100px;
  7.         height:900px;
  8.         margin:0 auto 0 auto;
  9.         overflow:auto;
  10.     }
  11.     #container h1{
  12.         color:#FFF;
  13.         font-size:24px;
  14.         margin:30px 0px 60px 350px;
  15.     }
  16.     textarea{
  17.         border:solid 2px #5bc0fb;
  18.         width:250px;
  19.         background:url(bg.jpg);
  20.         float:left;
  21.         overflow:auto;
  22.     }
  23.     .field-section{
  24.         background:#3C9;
  25.         margin-left:50px;
  26.     }
  27.     .fila{
  28.         width:250px;
  29.         float:left;
  30.         margin-right:90px;
  31.         color:#FFF;
  32.     }
  33.     .preview-section{
  34.         float:left;
  35.         margin-top:30px;
  36.         margin-left:50px;
  37.     }
  38. .resp{
  39.     width:250px;
  40.     background:#FFF;
  41.     border:solid 2px #999;
  42.     float:left;
  43.     margin-right:79px;
  44.     height:300px;
  45.  
  46. }
Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.       $(function(){
  3.         $("textarea[name=word]").keyup(function(){
  4.           var word = $(this).val();
  5.           $(".preview_word").empty().append(word);
  6.         })
  7.  
  8.         $(".field-section textarea").keyup(function(){
  9.           var attr = $(this).attr("id");
  10.           var word_preview = $(this).val();
  11.           $("#preview_"+attr).empty().append(word_preview);          
  12.         })
  13.  
  14.       })
  15.  
  16.     </script>

No olvides agregar tu hoja de jquery.min-1.4.js