打印引导文本区，只显示滚动条

Question

我试图解决这个问题几天了，但没有找到任何可以帮助我的东西，所以我希望在这里我能找到一些帮助。 我有一个引导页，这是一个报告页面，它看起来是这样的：它在这里的样子

但是当我在文本区域输入文本并想要打印时，它不会显示整个内容，而是只显示滚动条和文本的一部分：这就是我想要打印时的样子

有谁知道我该如何解决这个问题，在此先感谢！

这是一个代码示例：

`code`  <div id="print">
    <div class="izvestaj-podaci print_div">

        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Name" id="example-text-input">
        </div>


        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Surname" id="example-search-input">
        </div>
        <div class="form-group row">
            <input class="form-control" type="date" placeholder="Date of birth" id="example-date">
        </div>
        <div class="form-group row">
            <input class="form-control" type="tel" placeholder="Phone number" id="example-tel-input">
        </div>
    </div>
    <div class="izvestaj">
        <div class="form-group row big">
            <textarea name="career[message]" class="form-control .d-print-block" tabindex="4" placeholder="Write report" required></textarea>
        </div>
        <div class="form-group row date">
            <input class="form-control" type="datetime-local" placeholder="2011-08-19" id="example-date">
        </div>
        <div class="form-group row date">
            <input class="form-control" type="tel" placeholder="Price" id="example-tel-input">
        </div>
        <div class="form-group row date">
            <input class="form-control" type="text" placeholder="Done by" id="example-tel-input">
        </div>
    </div>
</div>`code`

Answer 1

可能这个脚本会帮助你：

 /* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04 */ (function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery); $('textarea#example-seven').autoResize();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="example-seven" cols="30" rows="5"></textarea>

我从这篇文章中得到了这个代码： https : //css-tricks.com/textarea-tricks/ 。 我希望它能帮助你。

Answer 2

我不确定我是否完全理解您的要求，但这可能对您有所帮助。

您可以定义默认情况下在文本区域中可见的行数。

<textarea rows="number">

Number 指定文本区域的高度（以行为单位）。 默认值为 2

W3Schools 的解释

 <!DOCTYPE html> <html> <body> <textarea rows="4" cols="50"> Stackoverflow is awesome </textarea> <p>This textarea has 4 visible rows.</p> <p>You can change that by changing the value of the "rows" attribute.</p> </body> </html>

打印引导文本区，只显示滚动条

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-04-17 11:07:48

解决方案2
0 2018-04-17 11:06:16

打印引导文本区，只显示滚动条

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-04-17 11:07:48

解决方案2 0 2018-04-17 11:06:16

解决方案1
2 已采纳 2018-04-17 11:07:48

解决方案2
0 2018-04-17 11:06:16