Using jQuery to display the complete contents of a textbox when printing

When printing a web page that contains text inputs (a.k.a. a TextBox in ASP.NET) overflow content can be missing if the control isn't large enough. I've put together a small jQuery script that adds a span next to each text input that is usually hidden. The content of the span is then set to match the content of the input, including if the content is changed.

Note: In my case putting an overflow:visible; in the CSS wouldn't be sufficient.

jQuery

        $(document).ready(function(){
            
            $('input[type="text"]').each(function () {
                    $(this).after('' + $(this).val() + '');
                });
            
            $('input[type="text"]').change(function () {
                var textbox = $(this);
                var id = textbox.attr('id');
                $('#' + id + ' + span').each(function (){
                    $(this).text(textbox.val());
                    });
                }); 
        });

CSS

  
 .printOnly
 {
  display: none;
 }

 @media print { 
  input[type='text']
  {
   display:none;
  }
 
  .printOnly
  {
   display: inline;
  }
 }