Question

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

但是当我在文本区域中输入文本并想要打印时，它并不显示整个内容，而只是显示滚动条和文本的一部分：this is how it looks like when I want to print

有谁知道我怎么能解决这个问题，提前谢谢！

这是一个代码示例：

`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

可能它的脚本会帮助你：

＆＃13;

/*
 * 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();

＆＃13;

<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>

＆＃13;

我从这篇文章中获得了这段代码：https://css-tricks.com/textarea-tricks/。我希望它对你有所帮助。

Answer 2

我不确定我是否完全了解你的任务，但这可能对你有帮助。

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

<textarea rows="number">

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

Explication by 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>

打印bootstrap文本区域，它只显示滚动条

2 个答案: