Print when textarea has overflow
You cannot solve this problem with CSS alone.
Why Pure-CSS Solutions are Insufficient (with demo)
Let me convince you the answers involving print stylesheets and overflow: visible
are insufficient. Open this page and look at the source. Just what they suggested, right? Now print preview it (in, say, Chrome 13 on OS X, like me). Note that you can only see a line or two of the note when you attempt to print!
Here’s the URL for my test case again: https://alanhogan.github.io/web-experiments/print_textarea.html
Solutions:
A JavaScript link that opens a new window and writes the contents of the textarea to it for printing. Or:
When the textarea is updated, copy its contents to another element that that his hidden for screen but displayed when printed.
(If your
textarea
is read-only, then a server-side solution is also workable.)
Note that textarea
s treat whitespace differently than HTML does by default, so you should consider applying the CSS white-space: pre-wrap;
in the new window you open or to your helper div
, respectively. IE7 and older do not understand pre-wrap
however, so if that is an issue, either accept it or use a workaround for them. or make the popup window actually plain text, literally served with a media type text/plain
(which probably requires a server-side component).
The “Print Helper” Solution (with code + demo)
I have created a demo of one JavaScript technique.
The core concept is copying the textarea contents to another print helper. Code follows.
HTML:
<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>
CSS (all / non-print):
/* Styles for all media */
#print_helper {
display: none;
}
CSS (print):
/* 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 (with 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>
Again, the successful JavaScript-based demo is at https://alanhogan.github.io/web-experiments/print_textarea_js.html.
Why is it printing none in my views for the textarea I'm getting from html?
Requests work with textareas and inputs with attribute name, not id. So you should add a name attribute and refer to it in your code.
window.print inclusive textarea values
Just giving a point, you are just selecting all innerHTML but not the values. So one of the easiest way is to just save the textarea
values and assign it back while printing in a printWindow
.
I just added the above words in programming sentence in the below code.
function print(section) {
var textArea1 = document.getElementById('1').value;
var textArea2 = document.getElementById('2').value;
var textArea3 = document.getElementById('3').value;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.document.getElementById('1').value = textArea1;
printWindow.document.getElementById('2').value = textArea2;
printWindow.document.getElementById('3').value = textArea3;
printWindow.print();
printWindow.close();
}
I think it's not the best way. But it works very fine.
How to print textarea value?
You are missing two things which I will explain to you. If you got any questions feel free to ask them.
First you will have to prevent the form from submitting. For this you can bind a function to the onsubmit event.
Second you have to append the value of the textbox to the result paragraph.
Things like styling etc should be solvable by you. I'm using a list which is not a must.
function fn1() {
let li = document.createElement("LI");
let text = document.createTextNode(document.getElementById("text1").value);
li.appendChild(text)
document.getElementById("result").appendChild(li);
alert("Thank you!");
}
function submithandler(event) {
event.preventDefault();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
font-family: sans-serif;
/*background-image: url(guest.jpg);
background-size: 450px;*/
}
.container {
width: 600px;
border: 2px solid black;
padding: 15px 10px;
}
.container h2 {
text-align: center;
margin-bottom: 15px;
}
textarea {
height: 25px;
width: 100%;
border: none;
border-bottom: 2px solid gray;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s
}
.btn button {
padding: 10px 15px;
border: none;
outline: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
color: white;
background-color: orange;
}
button {
color: gray;
background-color: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Visitor comment</title>
<link rel="stylesheet" type="text/css" href="visitor.css">
</head>
<body>
<div class="container">
<h2>Leave Us a Comment</h2>
<form onsubmit="submithandler(event)">
<textarea id="text1" placeholder="Add Your Comment"></textarea>
<div class="btn">
<button onclick="fn1()" id="btn1">Comment</button>
<!-- <button>Cancel</button> -->
</div>
</form>
</div>
<ul id="result"></ul>
<script type="visitor.js"></script>
</body>
</html>
Can't get exact print out result from HTML textarea
The line breaks are actually preserved untill you print the text out. HTML doesn't doesn't detect the line breaks in the text.
Try this for JS:
textAreaText.replace(/(?:\r\n|\r|\n)/g, '<br>');
How do I replace all line breaks in a string with <br /> tags?
Try this for PHP :
http://php.net/manual/en/function.nl2br.php
Printing only a textarea
Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.
Related Topics
How to Apply CSS and Styling to a React Component
Arrange 2 Items Per Row Using Flexbox
After Pseudo Element Not Appearing in Code
Link External CSS File Only for Specific Div
How Is CSS Applied by The Browser, and Are Repaints Affected by It
Constructing a Responsive Website
How to Display The HTML Code of a Webpage in a Batch File
Are Nested Span Tags Ok in Xhtml
Page Height to 100% of Viewport
Safari - Videos Load Far Too Slowly
Conditionally-Rendering CSS in HTML Head
Yet Another HTML/CSS Layout Challenge - Full Height Sidebar with Sticky Footer
No Video with Supported Format and Mime Type Found. What Does This Mean and How to Change This
Excel Crashes When Attempting to Inspect Dispstaticnodelist
Why Is Using Tables for Website Layout Such an Evil