تنفيذ منطقة نصية يمكن تغيير حجمها؟

Question

كيف يقوم Stackoverflow بتنفيذ منطقة النص التي يمكن تغيير حجمها؟

هل هذا شيء قاموا بتدوينه بأنفسهم أم أنه مكون متاح للعامة ويمكنني إرفاقه بسهولة بمناطق النص على مواقعي؟

لقد وجدت هذا السؤال وهو لا يفعل ما أريد تمامًا.

autosize-textarea

يتحدث هذا أكثر عن تغيير حجم مناطق النص تلقائيًا بينما أريد منطقة الاستيلاء الصغيرة التي يمكنك سحبها لأعلى ولأسفل.

Answer 1

يستخدم StackOverflow مكونًا إضافيًا لـ jQuery لإنجاز هذا: TextAreaResizer.

من السهل التحقق من ذلك - فقط اسحب شبيبة الملفات من الموقع .

ملاحظة تاريخية: عندما تمت كتابة هذه الإجابة في الأصل، كان WMD وTextAreaResizer مكونين إضافيين منفصلين، ولم يتم تأليف أي منهما بواسطة فريق SO Dev (راجع أيضًا: إجابة ميكاهويتمان).كما أن جافا سكريبت الخاص بالموقع كان سهل القراءة...لا شيء من هؤلاء بشكل صارم صحيح بعد الآن، ولكن TextAreaResizer لا يزال يعمل بشكل جيد.

Answer 2

كنت بحاجة إلى وظيفة مماثلة في الآونة الأخيرة.تسمى النمو التلقائي وهو البرنامج المساعد المذهل مسج مكتبة

Answer 3

في البداية اعتقدت أنها كانت ميزة مضمنة في محرر Wysiwym Markdown, لكن Shog9 صحيح:لم يتم دمجها على الإطلاق، ولكن بفضل المكون الإضافي jQuery TextAreaResizer (لقد ضللت بسبب المتصفح الذي كان يستخدمه للتحقق من عرض المحرر لأن Google Chrome نفسه يضيف الوظائف القابلة للتوسيع في مناطق النص — مثلما يفعل متصفح Safari).

Answer 4

باستخدام AngularJS:

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

سيؤدي هذا إلى تحويل جميع مناطق النص الخاصة بك إلى النمو/الانكماش.إذا كنت تريد أن تنمو/تتقلص مناطق نصية معينة فقط - قم بتغيير الجزء العلوي ليقرأ على النحو التالي:

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

امل ان يساعد!

Answer 5

ماذا عن هذا، عمله

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>