it-swarm.dev

Textarea ارتفاع السيارات

أريد أن اجعل ارتفاع textarea مساويًا لارتفاع النص بداخله (وإزالة شريط التمرير)

HTML

<textarea id="note">SOME TEXT</textarea>

CSS

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

JsFiddle: http://jsfiddle.net/Tw9Rj/

125
Mohammad Mahdi Naderi

ويمكن تحقيق ذلك باستخدام JS. إليك "سطر واحد" حل باستخدام elastic.js :

$('#note').elastic();

محدّث: يبدو أن "elastic.js" لم يعد موجودًا ، ولكن إذا كنت تبحث عن مكتبة خارجية ، فيمكنني أن أوصي autosize.js بواسطة Jack Moore . هذا هو مثال العمل:

autosize(document.getElementById("note"));
textarea#note {
        width:100%;
        box-sizing:border-box;
        direction:rtl;
        display:block;
        max-width:100%;
        line-height:1.5;
        padding:15px 15px 30px;
        border-radius:3px;
        border:1px solid #F7E98D;
        font:13px Tahoma, cursive;
        transition:box-shadow 0.5s ease;
        box-shadow:0 4px 6px rgba(0,0,0,0.1);
        font-smoothing:subpixel-antialiased;
        background:linear-gradient(#F9EFAF, #F7E98D);
        background:-o-linear-gradient(#F9EFAF, #F7E98D);
        background:-ms-linear-gradient(#F9EFAF, #F7E98D);
        background:-moz-linear-gradient(#F9EFAF, #F7E98D);
        background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

تحقق من هذه الموضوعات المشابهة أيضًا:

Autosizing textarea باستخدام Prototype

Textarea لتغيير الحجم بناءً على طول المحتوى

إنشاء textarea مع تغيير الحجم التلقائي

35
Mike

هذا باستخدام شفرة جافا سكريبت الصافية.

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}
textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;
}
<textarea onkeyup="auto_grow(this)"></textarea>
256
Moussawi7

بالنسبة لأولئك منا إنجاز هذا مع الزاوي ، كنت التوجيه

HTML:

<textarea elastic ng-model="someProperty"></textarea>

JS:

.directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);

$timeout يصطف إلى قائمة الأحداث التي ستطلق بعد تحميل DOM ، وهو أمر ضروري للحصول على التمرير الصحيحارتفاع (وإلا فستحصل على undefined)

113
blockloop

لقد استخدمت jQuery AutoSize . عندما حاولت استخدام Elastic ، أعطاني مرارًا وتكرارًا ارتفاعات وهمية (textarea طويل القامة) لقد نجح jQuery AutoSize جيدًا ولم يواجه هذه المشكلة.

13
Peter

أرى أن هذا قد تمت الإجابة عليه بالفعل ، لكنني أعتقد أن لديّ حل jQuery بسيط (ليست هناك حاجة إلى jQuery ، بل أستمتع باستخدامه):

أقترح حساب فواصل الأسطر في النص textarea وتعيين السمة rowstextarea وفقًا لذلك.

var text = jQuery('#your_textarea').val(),
    // look for any "\n" occurences
    matches = text.match(/\n/g),
    breaks = matches ? matches.length : 2;

jQuery('#your_textarea').attr('rows',breaks + 2);
8
Douglas.Sesar

Jsfiddle

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
    background:linear-gradient(#F9EFAF, #F7E98D);
    height:100%;
}
html{
    height:100%;
}
body{

   height:100%;    
}

أو javascript

var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');

Jsfiddle

5
Pumpkinpro
var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
    var t = document.getElementById(id);
    if (t.scrollTop == 0)   t.scrollTop=1;
    while (t.scrollTop == 0) {
        if (t.rows > minRows)
                t.rows--; else
            break;
        t.scrollTop = 1;
        if (t.rows < maxRows)
                t.style.overflowY = "hidden";
        if (t.scrollTop > 0) {
            t.rows++;
            break;
        }
    }
    while(t.scrollTop > 0) {
        if (t.rows < maxRows) {
            t.rows++;
            if (t.scrollTop == 0) t.scrollTop=1;
        } else {
            t.style.overflowY = "auto";
            break;
        }
    }
}
2
user3530437

html

<textarea id="wmd-input" name="md-content"></textarea>

js

var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0){
       textarea.css("height",top + height)
    }

المغلق

#wmd-input{
    width: 100%;
    overflow: hidden;
    padding: 10px;
}
0
emitle