প্রোটোটাইপ ব্যবহার করে কোনও পাঠ্যগ্রন্থ কীভাবে অটোসাইজ করা যায়?


121

আমি বর্তমানে যে সংস্থার জন্য কাজ করি তার অভ্যন্তরীণ বিক্রয় অ্যাপ্লিকেশন নিয়ে কাজ করছি এবং আমার একটি ফর্ম পেয়েছে যা ব্যবহারকারীর সরবরাহ ঠিকানা পরিবর্তন করতে দেয়।

এখন আমি মনে করি এটি দেখতে খুব সুন্দর লাগবে, মূল ঠিকানাগুলির বিশদ জন্য আমি যে পাঠ্যটি ব্যবহার করছি তা যদি কেবলমাত্র পাঠ্যের ক্ষেত্রটি গ্রহণ করে এবং পাঠ্যটি পরিবর্তন করা হয় তবে স্বয়ংক্রিয়ভাবে পুনরায় আকার দিন।

বর্তমানে এটির একটি স্ক্রিনশট এখানে।

আইএসও ঠিকানা

কোন ধারনা?


@Chris

একটি ভাল পয়েন্ট, তবে এর কারণগুলি আমি চাই এটির পুনরায় আকার দিন। আমি এটি থাকা তথ্যের ক্ষেত্র হিসাবে এটি যে অঞ্চলটি নেয় এটি চাই। আপনি যেমন স্ক্রিন শটটিতে দেখতে পাচ্ছেন, আমার যদি একটি নির্দিষ্ট টেক্সারিয়া থাকে তবে এটি উল্লম্ব স্থানটির একটি ন্যায্য ওয়া্যাক নেয়।

আমি ফন্ট হ্রাস করতে পারি, তবে বড় এবং পাঠযোগ্য হওয়ার জন্য আমার ঠিকানা দরকার। এখন আমি পাঠ্য ক্ষেত্রের আকারটি হ্রাস করতে পারি, তবে তারপরে এমন লোকদের সাথে আমার সমস্যা হয় যাদের অ্যাড্রেস লাইন থাকে যা 3 বা 4 লাগে (একটিতে 5 লাগে) লাইন। ব্যবহারকারীকে স্ক্রোলবারটি ব্যবহার করার দরকার হ'ল একটি প্রধান নম্বর।

আমার ধারণা আমার আরও কিছুটা নির্দিষ্ট হওয়া উচিত। আমি উল্লম্ব আকার পরিবর্তন করার পরে, এবং প্রস্থটি তেমন গুরুত্বপূর্ণ নয়। উইন্ডোটির প্রস্থ খুব ছোট হয়ে গেলে (যেমন আপনি স্ক্রিনশটটিতে দেখতে পাচ্ছেন) আইএসও নম্বরটি (বৃহত "1") ঠিকঠাকের নীচে ধাক্কা খায় তবে এটিই ঘটে problem

এটি একটি চালাকি সম্পর্কে নয়; এটি এমন একটি পাঠ্যক্ষেত্র থাকার বিষয়ে যা ব্যবহারকারী সম্পাদনা করতে পারে যা অপ্রয়োজনীয় স্থান গ্রহণ করবে না, তবে এতে সমস্ত পাঠ্য প্রদর্শিত হবে।

যদিও কেউ যদি সমস্যাটির কাছে যাওয়ার অন্য কোনও উপায় নিয়ে আসে তবে আমি এটির জন্যও উন্মুক্ত।


আমি কোডটি কিছুটা সংশোধন করেছি কারণ এটি অদ্ভুত অভিনয় করছিল। আমি এটি কী-আপটিতে সক্রিয় করতে পরিবর্তন করেছি, কারণ এটি সবেমাত্র টাইপ করা চরিত্রটি বিবেচনায় নেবে না।

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

আপনি কি এমন কোনও ডেমো সাইট তৈরি করতে পারেন যেখানে আমরা এটি কর্মক্ষেত্রে দেখতে পারি?
আইনার ইলাফসন


এখানে কি জিকুয়ারি ভার্জিনি আছে? JQuery- এ টেক্সটআরিয়ার কলস এবং সারিগুলি কীভাবে অ্যাক্সেস করবেন?
Zach

প্রায় একই, কিন্তু স্পষ্ট প্রয়োজন যখন টেক্সট মুছে ফেলা হবে যে ছোট হওয়া উচিত সঙ্গে stackoverflow.com/questions/454202/...
সিরো Santilli郝海东冠状病六四事件法轮功

উত্তর:


75

ফেসবুক এটি করে, আপনি যখন মানুষের দেয়ালে লিখেন তবে কেবল উল্লম্বভাবে আকার পরিবর্তন করুন।

অনুভূমিক পুনরায় আকার আমাকে শব্দ-মোড়ানো, লম্বা লাইনগুলি এবং এর কারণে জগাখিচুড়ি হিসাবে আঘাত করে, তবে উল্লম্ব আকার পুনরায় আকারটি বেশ নিরাপদ এবং সুন্দর বলে মনে হচ্ছে।

আমি জানি যে ফেসবুক-ব্যবহার করে নতুন কেউ এ সম্পর্কে কখনও কিছু উল্লেখ করেনি বা বিভ্রান্ত হয়ে পড়েছি। 'এগিয়ে যাও, বাস্তবায়ন করুন' বলার জন্য আমি এটি উপাখ্যানীয় প্রমাণ হিসাবে ব্যবহার করব।

প্রোটোটাইপ ব্যবহার করে এটি করার জন্য কিছু জাভাস্ক্রিপ্ট কোড (কারণ এটিই আমি পরিচিত:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

পিএস: স্পষ্টতই এই জাভাস্ক্রিপ্ট কোডটি খুব নিখুঁত এবং ভালভাবে পরীক্ষিত নয় এবং আপনি সম্ভবত এটিতে উপন্যাস সহ পাঠ্যবক্সগুলিতে এটি ব্যবহার করতে চান না, তবে আপনি সাধারণ ধারণাটি পেয়ে যান।


2
এটি ব্রাউজারটিকে কোনও চরিত্রের বিরতি ধরেছে, যা ভুল। এটা ব্যবহার করে দেখুন <textarea cols='5'>0 12345 12345 0</textarea>। (আমি প্রায় একটি সমান বাস্তবায়ন লিখেছি এবং এটি ব্যবহারের এক মাস পরে এটি ধরা পড়েনি)) এটি ফাঁকা লাইনেও ব্যর্থ হয়।
st-boost

এর জন্য কি কোন জিকুয়ারি সংস্করণ রয়েছে?
পান্না

$ A (str.split ("\ n")) এর ব্যাকস্ল্যাশ-এর ​​আরেকটি প্রয়োজন। (উপরের উত্তরের আমার সম্পাদনাটি কোনও কারণে বেঁচে ছিল না))
ঘেরসন

67

এর কয়েকটি উত্তরের একটি পরিশোধন হ'ল সিএসএসকে আরও কাজ করতে দেওয়া।

প্রাথমিক রুটটি মনে হয়:

  1. textareaএবং একটি গোপন রাখতে একটি ধারক উপাদান তৈরি করুনdiv
  2. জাভাস্ক্রিপ্ট ব্যবহার করে, রাখতে textareaএর বিষয়বস্তু সাথে সিঙ্ক divএর
  3. ব্রাউজারটিকে সেই ডিভের উচ্চতা গণনা করার কাজটি করতে দিন
  4. যেহেতু ব্রাউজারটি লুকানো রেন্ডারিং / সাইজিং পরিচালনা করে div, তাই আমরা স্পষ্টভাবে textareaএর উচ্চতা নির্ধারণ করি ।

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}
html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>


5
এটি একটি দুর্দান্ত সমাধান! একমাত্র সতর্কতা হ'ল ব্রাউজারগুলি যা বাক্স-সাইজিং (IE <7) সমর্থন করে না এবং প্রস্থটি যথাযথভাবে গণনা করবে না এবং তাই আপনি কিছুটা নির্ভুলতা হারাবেন, তবে আপনি যদি শেষে একটি লাইনের যথাযথ স্থান রেখে চলেছেন, আপনার এখনও ঠিক আছে। অবশ্যই সরলতার জন্য এটি ভালবাসেন।
আন্তোনিও সালাজার কার্ডোজো

4
এই সমাধানটি স্ট্যান্ডএলোন হিসাবে ব্যবহার করার ক্ষেত্রে স্বাধীনতা নিয়েছি, jQuery প্লাগইন ব্যবহার করা সহজ, কোনও মার্কআপ বা স্টাইলিংয়ের প্রয়োজন নেই। xion.io/jQuery.xarea যদি কেউ এর ব্যবহার করতে পারে তবে :)
Xion

2
টেক্সটকপিটিকে লুকানোতে সেট করা এখনও লুকানো ডিভকে মার্কআপে স্থান নিতে দেয় যাতে পাঠ্যকপি বিষয়বস্তু বড় হওয়ার সাথে সাথে শেষ পর্যন্ত আপনি আপনার পৃষ্ঠার পুরো দৈর্ঘ্য বরাবর একটি স্ক্রোলবার পাবেন ...
শীর্ষস্থানীয়

1
এটির জন্য আরও একটি সুন্দর ঝাঁকুনি; var text = $("#textArea").val().replace(/\n/g, '<br/>') + '&nbsp;';টেক্সারিয়া শেষে খালি নতুন লাইন থেকে একটি খালি খালি না করে যাওয়ার সময় আপনি ঝাঁকুনিপূর্ণ আচরণ না পেয়ে তা নিশ্চিত করে, যেহেতু লুকানো ডিভটি এনপিএসে মোড়ানো নিশ্চিত করে।
অনিচ্ছাকৃত

1
@ & nbsp; হঠাৎ আকারে বেড়ে যাওয়া থেকে মুক্তি পেতে যখন আপনি প্রথম লাইনে একটি নতুন লাইনে যুক্ত করবেন - আমার কাছে এটি ছাড়াই ভাঙা - এটি উত্তরে যুক্ত করা উচিত!
davnicwil

40

এখানে একটি টেক্সেরিয়া অটোসাইজ করার জন্য অন্য কৌশল's

  • লাইনের উচ্চতার পরিবর্তে পিক্সেল উচ্চতা ব্যবহার করে: একটি আনুপাতিক ফন্ট ব্যবহৃত হয় তবে লাইন মোড়কের আরও সঠিক পরিচালনা accurate
  • আইডি বা উপাদান উভয়ই ইনপুট হিসাবে গ্রহণ করে
  • একটি alচ্ছিক সর্বোচ্চ উচ্চতার পরামিতি গ্রহণ করে - দরকারী যদি আপনি পাঠ্যের ক্ষেত্রটি নির্দিষ্ট আকারের বাইরে বাড়তে না চান (এটি সমস্ত স্ক্রিনটিকে স্ক্রিনে রাখুন, ব্রেকিং লেআউট ইত্যাদি এড়ান)
  • ফায়ারফক্স 3 এবং ইন্টারনেট এক্সপ্লোরার 6 এ পরীক্ষিত

কোড: (প্লেইন ভ্যানিলা জাভাস্ক্রিপ্ট)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   var adjustedHeight = text.clientHeight;
   if (!maxHeight || maxHeight > adjustedHeight)
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if (maxHeight)
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if (adjustedHeight > text.clientHeight)
         text.style.height = adjustedHeight + "px";
   }
}

ডেমো: (আমি এখনই টাইপ করছি এমন টেক্সারিয়ায় jQuery ব্যবহার করে, লক্ষ্যগুলি ব্যবহার করে - যদি আপনি ফায়ারব্যাগ ইনস্টল করেন তবে কনসোলটিতে উভয় নমুনা পেস্ট করুন এবং এই পৃষ্ঠায় পরীক্ষা করুন)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

@ এসএমবি - সম্ভবত এটি প্রয়োগ করা খুব কঠিন হবে না, কেবলমাত্র অন্য শর্তযুক্ত যোগ করুন
জেসন

@ জেসন: বাক্সের পাঠ্যটি যখন পূরণ না করে clientHeightএবং scrollHeightসমান হয়, তাই আপনি যদি চান আপনার টেক্সারিটি সঙ্কুচিত হওয়ার পাশাপাশি বাড়তে চান তবে আপনি এই পদ্ধতিটি ব্যবহার করতে পারবেন না।
ব্র্যান্ট ববি

এটিকে সঙ্কুচিত করার জন্য আপনাকে কেবল এই কোডটি 6 লাইনের আগে যুক্ত করতে হবে:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";
গ্যাপিপ্রো

14

সম্ভবত সবচেয়ে সংক্ষিপ্ত সমাধান:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

এইভাবে আপনার কোনও লুকানো ডিভিড বা এর মতো কিছু দরকার নেই।

দ্রষ্টব্য: আপনি this.style.height = (this.scrollHeight) + "px";কীভাবে টেক্সারিয়া স্টাইল করবেন তার উপর নির্ভর করে খেলতে হবে (লাইন-উচ্চতা, প্যাডিং এবং সেই ধরণের স্টাফ)।


আপনি যদি স্ক্রোলবার জ্বলতে কিছু মনে করেন না তবে সেরা সমাধান।
সিফিলল

এটি কেবল কীআপ ইভেন্টটি ধরা সহ যথেষ্ট হবে। আপনি কি তাই মনে করেন না?
সিফিলল

2
টেক্সারিয়া ওভারফ্লো সম্পত্তিটি "লুকানো" তে সেট করুন যাতে স্ক্রোলবার জ্বলতে না পারে।
সিফিলল

keyupযথেষ্ট হতে পারে, তবে আমি নিশ্চিত নই আমি এত খুশি হয়েছি যে আমি এটি বুঝতে পেরেছি, যে আমি অন্য কিছু চেষ্টা করা বন্ধ করে দিয়েছি।
এডুয়ার্ড লুকা

আপনি এখনও কেন যুক্ত করেছেন তা জানার চেষ্টা করছি st স্টাইল.হাইট = "1 পিএক্স"; বা this.style.height = "অটো"; আগে. আমি জানি যে, আমরা যদি এই লাইনটি যুক্ত না করি তবে আমরা সামগ্রীগুলি সরিয়ে ফেললে টেক্সেরিয়া পুনরায় আকার দেবে না। কেউ ব্যাখ্যা করতে যত্ন নিতে পারেন?
বালাসুব্রামণি এম

8

এখানে একটি পাঠ্য ক্ষেত্রের আকার পরিবর্তন করার একটি প্রোটোটাইপ সংস্করণ রয়েছে যা টেক্সারিয়ায় কলামগুলির সংখ্যার উপর নির্ভর করে না। এটি একটি উচ্চতর কৌশল কারণ এটি আপনাকে সিএসএসের মাধ্যমে পাঠ্য অঞ্চল নিয়ন্ত্রণ করার পাশাপাশি পরিবর্তনশীল প্রস্থের পাঠ্যকেও অনুমতি দেয় allows অতিরিক্তভাবে, এই সংস্করণটি বাকী অক্ষরের সংখ্যা প্রদর্শন করে। অনুরোধ করা হয়নি, এটি একটি দুর্দান্ত দরকারী বৈশিষ্ট্য এবং অনাকাঙ্ক্ষিত হলে সহজেই সরানো হয়।

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

কল করে উইজেট তৈরি করুন new Widget.Textarea('element_id')। ডিফল্ট বিকল্পগুলি কোনও বস্তু হিসাবে যেমন তাদেরকে পাস করে ওভাররাইড করা যায় new Widget.Textarea('element_id', { max_length: 600, min_height: 50})। আপনি যদি এটি পৃষ্ঠায় সমস্ত পাঠ্যপাঠের জন্য তৈরি করতে চান তবে এমন কিছু করুন:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

7

এখানে একটি সমাধান এখানে JQuery:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abcএকটি teaxtarea


5

নীচের লিঙ্কটি দেখুন: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

মৃত লিঙ্ক। কোডটি এখানে james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/…
ম্যাথু হুই

3

কেবল এটি পুনরায় ঘুরে দেখছি, আমি এটি সামান্য পরিপাটি করে তুলেছি (যদিও প্রোটোটাইপ / জাভাস্ক্রিপ্টে পুরো বোতল রয়েছে এমন কেউ উন্নতির পরামর্শ দিতে পারে?)।

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

কেবল এটির সাথে কল করুন:

new TextAreaResize('textarea_id_name_here');

3

আমি বেশ সহজ কিছু তৈরি করেছি। প্রথমে আমি টেক্সটরিয়াটি একটি ডিআইভিতে রেখেছি। দ্বিতীয়ত, আমি readyএই স্ক্রিপ্টটিতে ফাংশনটি আহ্বান করেছি ।

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

সহজ। এটি একবার সরবরাহ করার পরে ডিভের সর্বোচ্চ উচ্চতা, এক সারিটির একটি টেক্সটরিয়ার উচ্চতা দ্বারা বিভক্ত।


2

আমার নিজের জন্য এই ফাংশনটি প্রয়োজন, তবে এখানকার কেউই আমার যেমন প্রয়োজন তেমন কাজ করেনি।

সুতরাং আমি ওরিওনের কোড ব্যবহার করেছি এবং এটি পরিবর্তন করেছি।

আমি সর্বনিম্ন উচ্চতায় যুক্ত করেছি, যাতে ধ্বংসের সময় এটি খুব ছোট না হয়।

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

2

@ মিটারের উত্তরটি পছন্দ করুন।

তবে আমি কিছু উন্নতি পেয়েছি। আপনি jQuery height()ফাংশন ব্যবহার করতে পারেন । প্যাডিং-শীর্ষ এবং প্যাডিং-বটম পিক্সেল সম্পর্কে সচেতন হন। অন্যথায় আপনার টেক্সারিয়া খুব দ্রুত বাড়বে।

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

2

আমার সমাধান jQuery ব্যবহার না করা (কারণ কখনও কখনও তাদের একই জিনিস হতে হবে না) নীচে রয়েছে। যদিও এটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 7 এ পরীক্ষা করা হয়েছিল , সুতরাং সম্প্রদায়টি এটিকে ভুল বলে সমস্ত কারণ উল্লেখ করতে পারে:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

এখন পর্যন্ত আমি সত্যিই এটি কীভাবে কাজ করে তা পছন্দ করি এবং আমি অন্যান্য ব্রাউজারগুলির বিষয়ে চিন্তা করি না, তাই আমি সম্ভবত এটি আমার সমস্ত টেক্সারিয়ায় প্রয়োগ করব:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

1

জেরেমি 4 জুন পোস্ট করেছেন এমন প্রোটোটাইপ উইজেটের একটি বর্ধিতাংশ এখানে রয়েছে:

আপনি যদি টেক্সারিয়াসের সীমা ব্যবহার করেন তবে এটি ব্যবহারকারীকে আরও অক্ষর প্রবেশ করা থেকে বিরত রাখে। অক্ষর বাকী আছে কিনা তা এটি পরীক্ষা করে। যদি ব্যবহারকারী টেক্সটরিয়ায় পাঠ্যটি অনুলিপি করেন তবে পাঠ্যটি সর্বোচ্চে কেটে দেওয়া হয়। দৈর্ঘ্য:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://stackoverflow.com/questions/7477/autosizing-textarea
 * Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
 */
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options){
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function(){ 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});

1

জিকুয়ারি দিয়ে পেজলোডে টেক্সারিয়ার উচ্চতা নির্ধারণের জন্য @ রাসায়নিকের একটি দুর্দান্ত সমাধান ছিল, তবে আমার অ্যাপ্লিকেশনটির জন্য আমি ব্যবহারকারী আরও কন্টেন্ট যুক্ত করার কারণে টেক্সারিয়ার উচ্চতা বাড়াতে সক্ষম হতে চাই। আমি নিম্নলিখিতটির সাথে স্মৃতির সমাধানটি তৈরি করেছি:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

এটি খুব মসৃণ নয় তবে এটি কোনও ক্লায়েন্ট-মুখোমুখি অ্যাপ্লিকেশনও নয়, তাই মসৃণতা আসলেই কিছু যায় আসে না। (এটি যদি ক্লায়েন্ট-মুখোমুখি হত তবে আমি সম্ভবত একটি অটো-রাইজ জেিকিউরি প্লাগইন ব্যবহার করতাম))


1

তাদের জন্য যারা আইডির কোডিং করছেন এবং এই সমস্যার মুখোমুখি হন। আইই এর একটি ছোট কৌশল আছে যা এটি 100% সিএসএস করে তোলে।

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

এমনকি আপনি সারির জন্য একটি মান সরবরাহ করতে পারেন = "এন" যা আইআই উপেক্ষা করবে তবে অন্যান্য ব্রাউজারগুলি ব্যবহার করবে। আইই হ্যাকগুলি প্রয়োগ করে এমন কোডিং আমি সত্যিই ঘৃণা করি তবে এটি একটি খুব সহায়ক। এটি কেবল কুইর্কস মোডে কাজ করে এমনটি সম্ভব।


1

ইন্টারনেট এক্সপ্লোরার, সাফারি, ক্রোম এবং অপেরা ব্যবহারকারীদের স্পষ্ট করে সিএসএসে লাইন-উচ্চতার মান সেট করতে হবে। আমি একটি স্টাইলশিট করি যা নীচে সমস্ত পাঠ্য বাক্সের জন্য প্রাথমিক প্রোটাইটগুলি সেট করে।

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

1

এটি করার জন্য আমি সবেমাত্র jQuery এ লিখেছি এমন একটি ফাংশন - আপনি এটি প্রোটোটাইপটিতে পোর্ট করতে পারেন তবে তারা jQuery এর "প্রাণচঞ্চলতা" সমর্থন করে না যাতে এজাক্স অনুরোধগুলি যুক্ত উপাদানগুলি প্রতিক্রিয়া জানায় না।

এই সংস্করণটি কেবল প্রসারিত হয় না, মুছে ফেলা বা ব্যাকস্পেস চাপলে এটি চুক্তিবদ্ধ হয়।

এই সংস্করণটি jQuery 1.4.2 উপর নির্ভর করে।

উপভোগ করুন;)

http://pastebin.com/SUKeBtnx

ব্যবহার:

$("#sometextarea").textareacontrol();

অথবা (উদাহরণস্বরূপ কোনও jQuery নির্বাচক)

$("textarea").textareacontrol();

এটি ইন্টারনেট এক্সপ্লোরার 7 / ইন্টারনেট এক্সপ্লোরার 8 , ফায়ারফক্স 3.5 এবং ক্রোমে পরীক্ষা করা হয়েছিল। সব ঠিক আছে।


1

ASP.NET ব্যবহার করে, কেবল সহজভাবে এটি করুন:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.