propiedades - textarea no resizable html

Imprimir cuando textarea tiene desbordamiento

Question

Tengo un formulario con algunas áreas de texto que permiten una barra de desplazamiento cuando el texto supera el cuadro de texto. El usuario desea poder imprimir la pantalla y este texto no está visible. ¿Cómo hago que todo el texto sea visible solo para imprimir? ¿Es mejor hacer una impresión en el enlace de PDF o algo así?

Answer 1

Acaba de alertar el problema recientemente también. Gracias por las publicaciones de Alan H. Funciona perfecto con Chrome y Safari. Sin embargo, con IE y Firefox, el problema es que las últimas páginas (elementos de página después de textarea) faltarán en la impresión (FF), las páginas faltantes y el diseño superpuesto (IE9).

Otro hallazgo que será útil para resolver el problema es que puede establecer las propiedades de las filas de textarea correctamente como lo indica la altura del control para que funcione con el desbordamiento de CSS: cosas visibles. Todos los navegadores parecen respetar la propiedad de filas durante la impresión.

Answer 2

Con el uso de CSS puro, no es posible preparar el área de texto para imprimir.

Es necesario agregar algo de magia de javacript al área de texto o agregar un campo oculto.

Hay un par de soluciones que se han mencionado aquí:

1. Párrafo oculto o div
2. Usar Javascript para extender el tamaño del área de texto

1. Párrafo oculto o div

HTML y CSS:

<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>

<style>
  .hidden-div{display: none;}
  @media print{
    .hidden-div{display:block;}
  }
</style>

2. Javascript

Puede usar una biblioteca js, por ejemplo https://github.com/thomasjo/jquery-autoresize

$(function() {
    $("textarea").autoResize()
})

Answer 3

Defina un CSS separado para medios impresos como este <link rel="stylesheet" href="print.css" type="text/css" media="print" /> y para el área de texto, defina el atributo de desbordamiento como

overflow: visible;

Answer 4

Esta es una solución fácil con CSS, dado que a la mayoría de los usuarios no les molesta imprimir un espacio en blanco adicional. Solo apunte a una altura mínima para las áreas de texto al imprimir:

@media print { 
textarea {
min-height: 500px;  
}
}

Etiqueta eso al final de tu CSS con una altura mínima que sea lo suficientemente cómoda cuando lo mires en Vista Preliminar.

Answer 5

Esto parece funcionar para aplicar a todos los elementos que tienen contenido desbordado:

$("textarea").each(function () {
    var Contents = $(this).val();
    if ($(this)[0].scrollHeight > $(this).height()) {
        $(this).after("<div class=''print-helper''>" + Contents + "</div>");
        $(this).addClass("no-print");
    }
});

Answer 6

No puedes resolver este problema solo con CSS.

Por qué las soluciones Pure-CSS son insuficientes (con demostración)

Déjame que te convenza de las respuestas que implican las hojas de estilo de impresión y el overflow: visible son insuficientes. Abra esta página y mire la fuente. Justo lo que sugirieron, ¿verdad? Ahora imprima la vista previa (por ejemplo, Chrome 13 en OS X, como yo). ¡Tenga en cuenta que solo puede ver una o dos líneas de la nota cuando intenta imprimir!

Aquí está la URL de mi caso de prueba nuevamente: https://alanhogan.github.io/web-experiments/print_textarea.html

Soluciones:

1. Un enlace de JavaScript que abre una nueva ventana y escribe el contenido del área de texto para su impresión. O:

2. Cuando el área de texto se actualiza, copie su contenido a otro elemento que esté oculto para la pantalla pero que se muestre cuando se imprima.

3. (Si su área de textarea es de solo lectura, entonces una solución del lado del servidor también es viable).

Tenga en cuenta que textarea s trata el espacio en blanco de forma diferente que HTML por defecto, por lo que debe considerar aplicar el white-space: pre-wrap; CSS white-space: pre-wrap; en la nueva ventana que abres o en tu div auxiliar, respectivamente. Sin embargo, IE7 y versiones anteriores no entienden el pre-wrap , por lo que si eso es un problema, o bien, acéptelo o use una solución alternativa para ellos. o haga que la ventana emergente sea realmente texto sin formato, literalmente servido con un tipo de text/plain (que probablemente requiera un componente del lado del servidor).

La solución "Print Helper" (con código + demostración)

Creé una demostración de una técnica de JavaScript .

El concepto central es copiar los contenidos de texto a otro asistente de impresión. El código sigue.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (todo / no impreso):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (imprimir):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (con jQuery):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $(''#print_helper'').text($(''#the_textarea'').val());
  }
  $(''#the_textarea'').bind(''keydown keyup keypress cut copy past blur change'', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

Nuevamente, la exitosa demostración basada en JavaScript se encuentra en https://alanhogan.github.io/web-experiments/print_textarea_js.html .

Answer 7

Pasa por cada una de tus áreas de texto y mueve el contenido a un titular

    window.onbeforeprint = function () {
        $(''.print-content'').remove();
        $(''textarea'').each(function () {
            var text = $(this).val();
            $(this).after(''<p class="well print-content">'' + text + ''</p>'');
        });
    }

Y usa el siguiente CSS

.print-content {
  display: none !important;
}

@media print {
  .print-content {
    display: block !important;
  }
  textarea {display: none !important;}
}

Answer 8

Recientemente me encontré con el mismo problema. Mi solución fue duplicar el contenido en controles de formulario para editar y en divs para imprimir.

En mi cabeza pongo una hoja de estilo de impresión.

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

En printform.css pongo lo siguiente

.screenOnly { display: none; }
.printOnly { display: inline-block; }

Para textareas (y otros tipos de campo que causaban problemas) utilicé el siguiente código

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST [''myTextArea''])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST [''myTextArea''])); ?></div>

Cuando se muestran en la pantalla, se muestran las áreas de texto y los divs que duplican su contenido están ocultos. Al imprimir, aplica lo opuesto.

Sé que ya elegiste una respuesta a esta pregunta pero, si bien utilizar la hoja de estilo de impresión es una buena idea, no describió una solución específica. Configuración de desbordamiento: visible en el área de texto (mi primera idea) no funcionó, así que terminé usando la solución anterior. Si todavía tienes dificultades, espero que esto te ayude

Answer 9

Yo uso esto en mi estilo:

PRE.print {
display:none;
}

@media print {

  TEXTAREA {
    display:none;
  }

  PRE.print {
    display:block;
    width:90%; /* fixes margin issues in some funky browsers */
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-family:monospace,sans;
  }

}

Luego, después de cada TEXTAREA, utilizo un PRE con la clase "imprimir" así:

<textarea id="message" name="message" rows="10" cols="80" onblur="updatePrint(''#message'')"><?= $MESSAGE ?></textarea>
<pre id="message-print" class="print">
<?= $MESSAGE ?>
</pre>

... tenga en cuenta el PHP que utilicé, puede cambiar con su lenguaje de programación. Y luego este código anterior necesita la siguiente función, suponiendo que tiene una biblioteca jQuery cargada:

<script type="text/javascript">

function updatePrint(sID) {
  $(sID + ''-print'').text($(sID)[0].value);
}

</script>

La forma en que todo esto funciona

La forma en que esto funciona es que básicamente estoy cargando contenido dos veces en la página, pero usando la hoja de estilo para ocultar contenido no adecuado para la impresora como el TEXTAREA.

Puede cambiar el estilo PRE como lo desee. Sin embargo, uso el monoespacio en caso de que alguien quisiera imprimir el código HTML que escribieron en el campo y quería que formateara muy bien.

El evento onblur ayuda a capturar la necesidad de actualizar el PRE relacionado.

Tenga en cuenta que también puede hacer las cosas de la hoja de estilo a través del atributo multimedia en un enlace rel en la sección HEAD de su HTML, usando cosas como media = "all not print" y media = "print".