366

এটি সম্পর্কে আরও একটি থ্রেড ছিল , যা আমি চেষ্টা করেছি। তবে একটি সমস্যা রয়েছে: textareaআপনি যদি সামগ্রীটি মুছুন তবে সঙ্কোচিত হবে না। আমি এটি সঠিক আকারে সঙ্কুচিত করার কোনও উপায় খুঁজে পাচ্ছি না - clientHeightমানটি textareaএর সামগ্রীতে নয়, পূর্ণ আকার হিসাবে ফিরে আসে ।

এই পৃষ্ঠা থেকে কোড নীচে:

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

   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";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

— DisgruntledGoat
সূত্র

আপনি সংযুক্ত থ্রেডটির স্বীকৃত উত্তর আমার পক্ষে কাজ করে। লাইন বিরতি যুক্ত করে টেক্সারিয়া প্রসারিত হয় এবং সেগুলি সরিয়ে পাঠ্যের ক্ষেত্র সঙ্কুচিত করে। আপনি কোন ব্রাউজার ব্যবহার করছেন?

— বিপন্ন ম্যাসা

3

আমার ফাংশন ত্রুটি করে। অগত্যা লাইনের শেষে নতুন লাইনটি টাইপ করা উচিত। এটি আরও ভাল সমাধান। james.padolsey.com/javascript/jquery-plugin-autoresize

আপনি এটির

— অ্যান্ড্রু ড্রায়গা

প্রোটোটাইপ ব্যবহার করে পাঠ্যক্রম অটোসাইজের

— সিওরো সান্তিলি 郝海东冠状病病六四法轮功六四

আপনি যদি প্রতিক্রিয়া ব্যবহার করে থাকেন তবে আমি এর জন্য একটি প্যাকেজ তৈরি করেছি: npmjs.com/package/react-fluid-textarea

— মার্টিন ডসন

230

এটি আমার জন্য কাজ করে (ফায়ারফক্স 3.6 / 4.0 এবং ক্রোম 10/11):

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

স্নিপেট প্রসারিত করুন

আপনি যদি jsfiddle এ চেষ্টা করতে চান তবে এটি একটি একক লাইন দিয়ে শুরু হয় এবং প্রয়োজনীয় সঠিক পরিমাণটি বাড়ায়। এটি একটি একক জন্য ঠিক আছে textarea, তবে আমি এমন কিছু লিখতে চেয়েছিলাম যেখানে আমার অনেকগুলি এরকম থাকবে textarea(প্রায় কোনও একটি বড় টেক্সট ডকুমেন্টে সাধারণত লাইন থাকে)। সেক্ষেত্রে এটি সত্যই ধীর। (ফায়ারফক্সে এটি অত্যন্ত ধীরগতিতে রয়েছে really) সুতরাং আমি সত্যিই এমন একটি পন্থা চাই যা খাঁটি সিএসএস ব্যবহার করে। এটি দিয়ে সম্ভব হবে contenteditableতবে আমি চাই এটি কেবল প্লেইন টেক্সট হোক।

— panzi
সূত্র

13

এটা করে! আপনার জন্য একটি জিসফিল তৈরি করেছে: jsfiddle.net/CbqFv এটি এখন ক্রোম, ফায়ারফক্স এবং আইই 8 তে কাজ করে - যদিও এটি আইই 8-তে সামান্য ত্রুটিযুক্ত। আপনি লাইন সংখ্যা বৃদ্ধি বা হ্রাস করার সাথে সাথে এটি সামান্য বাইরে বেরিয়ে আসে। আপনি jQuery এর জন্য অটোরসাইজ প্লাগইন দেখে থাকতে পারেন, তারা টেক্সারিয়াকে ক্লোন করে, এর পরিবর্তে মূলটির পরিবর্তে অটোতে তার উচ্চতা নির্ধারণ করে এবং তারপরে মূলটিতে স্ক্রোলহাইট সেট করার মাধ্যমে এটি ব্যবহার করে। আমি এই আপডেটেড ফিডলটিতে এটি করেছি : jsfiddle.net/CbqFv/2 এটি আইই সমস্যা সমাধান করে তবে ফায়ারফক্স কাজ করা বন্ধ করে দেয়।

— ক্রিস মোসচিনি 10:58

3

@ হেলেননি: তার পরে কোনও আইডি ব্যবহার করবেন না। উদাহরণস্বরূপ একটি বর্গ ব্যবহার করুন এবং সেই শ্রেণীর সমস্ত উপাদানগুলির জন্য ডিআই কি করে তা করুন। এটি একটি প্রাথমিক কাজ হওয়া উচিত।

— পানজি

3

@ ডেনিলসনá যদি কেউ কেবলমাত্র ধরে নিতে পারে যে কেবলমাত্র আধুনিক ব্রাউজারগুলিই ওয়েবে ব্যবহৃত হয় তবে এটি আরও ভাল জায়গা হবে।

— পানজি

2

আই 11 এ কোনও স্ক্রোলবারটি এনভলভ করা থাকলে এটি ভালভাবে কাজ করবে না। আপনি যদি এই fiddle jsfiddle.net/CbqFv ব্যবহার করেন এবং কোনও স্ক্রোলবার না পাওয়া পর্যন্ত লাইনগুলি প্রবেশ করেন আপনি তা দেখতে পাবেন। কোন ধারনা?

— কালজাক

6

টেক্সারিয়া নীচের পৃষ্ঠার শেষের কাছাকাছি থাকলে এটি পুরোপুরি ভেঙে যায় - এর ফলে সবকিছু পিছনে পিছনে যায় style.height='auto'। আমি সন্দেহ করি যে সমাধানটি হ'ল কেবল পরিমাপের জন্য ব্যবহৃত একটি গোপন ভাইবোন যুক্ত করা।

— rr-

372

একটি সম্পূর্ণ YET সিম্পল সলিউশন

2020-05-14 আপডেট হয়েছে (মোবাইল এবং ট্যাবলেটগুলির জন্য উন্নত ব্রাউজার সমর্থন)

নিম্নলিখিত কোডটি কাজ করবে:

কী ইনপুটটিতে।
আটকানো পাঠ্য সহ (ডান ক্লিক করুন & সিটিআরএল + ভি)।
কাটা পাঠ্য সহ (ডান ক্লিক করুন & সিটিআরএল + এক্স)।
প্রাক লোডযুক্ত পাঠ্য সহ।
সমস্ত টেক্সারিয়ার সাথে (মাল্টলাইন পাঠ্যবক্স) সাইট প্রশস্ত।
সঙ্গে ফায়ারফক্স (v31-67 পরীক্ষিত)।
সঙ্গে ক্রোম (v37-74 পরীক্ষিত)।
সঙ্গে ইন্টারনেট (V9-v11 পরীক্ষিত)।
সঙ্গে এজ (v14-v18 পরীক্ষিত)।
সঙ্গে চলচ্চিত্র IOS সাফারি ।
সঙ্গে Android ব্রাউজার ।
জাভাস্ক্রিপ্ট কঠোর মোড সহ ।
কি W3C যাচাই।
এবং প্রবাহিত এবং দক্ষ হয়।

বিকল্প 1 (jQuery সহ)

এই বিকল্পটির jQuery প্রয়োজন এবং এটি পরীক্ষা করা হয়েছে এবং 1.7.2 - 3.3.1 এর সাথে কাজ করছে

সরল (আপনার মাস্টার স্ক্রিপ্ট ফাইলে এই jquery কোডটি যুক্ত করুন এবং এটি ভুলে যান))

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

স্নিপেট প্রসারিত করুন

Test on jsfiddle

বিকল্প 2 (খাঁটি জাভাস্ক্রিপ্ট)

সরল (আপনার মাস্টার স্ক্রিপ্ট ফাইলে এই জাভাস্ক্রিপ্ট যুক্ত করুন এবং এটি ভুলে যান।)

const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

স্নিপেট প্রসারিত করুন

Test on jsfiddle

বিকল্প 3 (jQuery এক্সটেনশন)

আপনি যদি স্বয়ংক্রিয় আকারের হতে চান এমন পাঠ্যগুলিতে আরও শৃঙ্খলা প্রয়োগ করতে চান তবে দরকারী Use

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

সাথে দাওয়াত $('textarea').autoHeight()

টেক্সটরিয়ার মাধ্যমে জাভাস্ক্রিপ্ট আপডেট করা

জাভাস্ক্রিপ্টের মাধ্যমে টেক্সটরিয়ায় সামগ্রী ইনজেকশনের সময় বিকল্প 1 এ ফাংশনটি শুরু করতে নিম্নলিখিত কোড যুক্ত করুন।

$('textarea').trigger('input');

প্রিন্ট টেক্সটরিয়া উচ্চতা

টেক্সেরিয়ার প্রাথমিক উচ্চতা ঠিক করতে আপনাকে একটি অতিরিক্ত শর্ত যুক্ত করতে হবে:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

স্নিপেট প্রসারিত করুন

— DreamTeK
সূত্র

12

এটি দুর্দান্ত সমাধান, যদি পৃথক বর্ণগুলির পরিবর্তে পদ্ধতির নাম এবং প্যারামিটারের নামটি সত্য নাম হিসাবে আপডেট করা হয় তবে এটি কিছুটা বোধগম্য হবে।

— ক্রিস মেরিসিক

5

@ অবিসিডিয়ান ধন্যবাদ! আমি ঠিক বুঝতে পেরেছিলাম যে আমি কেন সর্বদা 0 get পাই আমি বুটস্ট্র্যাপ মোডলে টেক্সারিটি রাখি! মোডালটি প্রথমে লুকানো থাকায়, এতে টেক্সারিয়াতে 0 টি স্ক্রোলহাইট থাকবে W

— ডাব্লুটিআইএফএস

7

@ অবিসিডিয়ান ফ্যান্টাস্টিক !! (বিকল্প 3)। this.style.height = 'auto';জাদু আচরণ ফিক্স হয়। আমি খুব হতাশ হয়েছি কেন স্ক্রোলহাইটটি আচরণে এত অদ্ভুত ছিল। অটোতে উচ্চতা, তারপরে একই রেন্ডার চক্রের স্ক্রোলহাইটের সাথে মিলে যাওয়া এখনও আমার মনকে উড়িয়ে দেয় যে কীভাবে এটি এই সমস্যাটিকে 'ঠিক করে' দেয় যদিও এটি কেবল প্রযুক্তিগতভাবে দ্বিতীয় উচ্চতার পেইন্টিং করা উচিত।

— বিট-কম

2

আমি আজ ক্রোমে 3 বিকল্প ব্যবহার করে দেখেছি এবং কয়েকটা টুইট করতে হয়েছিল। 1) আপনার যদি টেক্সারিয়াতে "উচ্চতা" বা "সমস্ত" রূপান্তর থাকে তবে এটি সর্বদা সঠিকভাবে আকার পরিবর্তন করবে না। আমি উচ্চতা প্রভাবিত করে এমন রূপান্তরগুলি ব্যবহার না করার পরামর্শ দেব recommend 2) স্ক্রোলহাইটটি দুটি সারির উচ্চতার একটি ন্যূনতম ফিরিয়ে দিচ্ছিল (সম্ভবত এটি ক্রোমে টেক্সারিয়াসের জন্য ডিফল্ট) তবে আপনি যদি এই পরিবর্তন করেন st স্টাইল.হাইট = 'অটো'; to this.style.height = '0px'; এবং প্রাথমিক অবস্থাকে আসলে 0 এ যাওয়া থেকে বিরত রাখতে একটি মিনিট উচ্চতা যুক্ত করুন, উপযুক্ত হলে উপযুক্ত স্ক্রোলহাইট উচ্চতার এক সারি ফিরিয়ে দেবে।

— জোড়োডিএলআরিনা

3

@ ওবিসিডিয়ান আপনি কীভাবে ব্যাখ্যা করতে পারেন যে কীভাবে this.style.height = 'auto';স্ক্রোলহাইটের আচরণ স্থির করা হয়েছে? এটা ঠিক যাদু।

— সিডনি

63

jQuery সমাধান আপনার প্রয়োজনীয়তা মেলে সিএসএস সামঞ্জস্য করুন

CSS ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

জাভাস্ক্রিপ্ট ...

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

বা jQuery 1.7 + এর বিকল্প ...

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

আমি আপনার পরীক্ষাগুলির জন্য একটি সূচনা পয়েন্ট হিসাবে পরম নূন্যতম স্টাইলিংয়ের সাথে একটি বেড়া তৈরি করেছি ... http://jsfiddle.net/53eAy/951/

— চিম
সূত্র

5

এটি ভাল, তবে overflow-y: hidden;পুনরায় আকার দেওয়ার সময় আমি স্ক্রোল বারটি সংক্ষিপ্তভাবে ঝলকানো থেকে রোধ করতে সিএসএসে যুক্ত করব।

— ব্রেকেটজোনদেব

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

— চিম

1

$('textarea.auto-resize').on('change cut paste drop keyup', function(){...})

— দৃশ্যের প্রশস্ততার

1

ভিউপোর্টের চেয়ে দীর্ঘ পাঠ্যে ক্রোম 40 উইন 8.1-এ পাগলের মতো লাফ দেয়। এটি বেশ অযোগ্য ব্যবহার করে।

— tobibeer

1

এন্টার (নিউলাইন) হোল্ডিংয়ের ফলে স্ক্রোলিং হয়। কীটি প্রকাশ না হওয়া পর্যন্ত আকারটি সামঞ্জস্য করে না।

— নীলস অ্যাবিল্ডগার্ড

28

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

ফায়ারফক্স 14 এবং ক্রোমিয়াম 18 তে পরীক্ষা করা হয়েছে 24 24 এবং 12 নম্বরগুলি নির্বিচারে, আপনার পক্ষে সবচেয়ে উপযুক্ত কি তা পরীক্ষা করে দেখুন।

আপনি স্টাইল এবং স্ক্রিপ্ট ট্যাগগুলি ছাড়াই করতে পারেন, তবে এটি কিছুটা অগোছালো ইমো হয়ে যায় (এটি পুরানো স্টাইলের এইচটিএমএল + জেএস এবং উত্সাহিত নয়)।

<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

সম্পাদনা: আধুনিকায়িত কোড অ্যাডভেন্টলিস্টেনারে অনকিআপ অ্যাট্রিবিউট পরিবর্তন করা হয়েছে।
সম্পাদনা: keyup বেশী ভালো keydown কাজ
সম্পাদনা: ঘোষণা ফাংশন ব্যবহার করার পূর্বে
সম্পাদনা: ইনপুট চেয়ে ভাল কাজ করে keydown (thnx @ WASD42 & @ এম এ-Maddin)

jsfiddle

— GijsjanB
সূত্র

3

এইটির কিছু ত্রুটি রয়েছে: 1) পাঠ্যগ্রন্থার পুনরায় আকার দেওয়া হবে না তবে ব্যবহারকারী কেবল তার মাউস বোতাম দিয়ে কিছু পেস্ট করুন; ২) ব্যবহারকারী কীবোর্ড (সিটিআরএল + ভি) ব্যবহার করে কিছু পেস্ট করলে টেক্সারিয়াকে কেবল তখনই আকার দেওয়া হবে যখন সে সিটিআরএল প্রকাশ করবে। যদি ব্যবহারকারী বেশ কয়েকবার Ctrl + V টিপেন তবে টেক্সারিয়া কেবল শেষের পরে বাড়বে। ইভেন্টগুলি আটকানো, কাটা, পরিবর্তন এবং ড্রপ করতে আপনার একই ফাংশন যুক্ত করা উচিত।

— WASD42

সুতরাং কেবল inputইভেন্টটি পরিবর্তে ব্যবহার করুন । স্ট্যাকওভারফ্লো.com

— মার্টিন শ্নাইডার

textareaওয়ান-লাইনার হিসাবে একাধিক সমর্থন সহ উন্নত সংস্করণ :

document.querySelectorAll('textarea').forEach(function(te){ te.addEventListener("input", function() { this.style.height='24px'; this.style.height=this.scrollHeight+12+'px'; }); });

— মিজনার

1

@ মিজনার এটি সংক্ষিপ্ত, তবে আমি এটি "উন্নত" বলব না। বেনামে ফাংশন সহ, removeEventListenerআপনার ইভেন্ট শ্রোতাদের কল করার এবং পরিষ্কার করার কোনও উপায় নেই । ফোর ইচ লুপে পুরো জায়গা জুড়ে ইভেন্ট শ্রোতাদের তৈরি করার সময় এটি বিশেষত গুরুত্বপূর্ণ। এছাড়াও, আমার দৃষ্টিতে, পাঠযোগ্যতা সংক্ষিপ্ততার চেয়ে অনেক বেশি গুরুত্বপূর্ণ।

— গিজসানবি

অন্যদের জন্য এবং ভবিষ্যতের জন্য আমার নিশ্চিত করুন যে box-sizing: border-box;সম্পত্তি সেট করা আছে অথবা অন্যদিকে প্রতিটি ইনপুট ইভেন্টের জন্য টেক্সারিয়া 4px দ্বারা বিস্তৃত হয়। আমি 3 ঘন্টা সময় কাটিয়েছি যতক্ষণ না বুঝেছি এই সমস্যাটি ছিল।

— আইয়ন

24

আমার জন্য সবচেয়ে ভাল সমাধান (কাজ এবং সংক্ষিপ্ত) হ'ল:

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    });

এটি পেস্টের সাথে কোনও ঝলক না করে (মাউসের সাহায্যেও) কাটা, প্রবেশ করানো এবং এটি সঠিক আকারে সঙ্কুচিত হয়ে কব্ণের মতো কাজ করে।

দয়া করে জেএসফিডালে একবার দেখুন ।

— vatavale
সূত্র

ভয়ঙ্কর !!! এক লাইন চুক্তি! বোকা প্রশ্ন হ্যা আমি যখন একটি অ্যানিমেশন এটির আকার পরিবর্তন করতে পারেন যোগ করতে পারেন? টেক্সট বাক্সটি সাজানোর মতো মৃদু আকার পরিবর্তন করুন তারপরে আকারে ঝাঁপ দাও?

— ব্যবহারকারী 2513846

1

@ ব্যবহারকারী 2513846 দেখে মনে হচ্ছে মাল্টি লাইন সম্পাদনার নকশা দ্বারা এটি সম্ভব নয়। আমি টেক্সটরিয়ার আকারটি অ্যানিমেট করার একটি উদাহরণ দিয়েছি: jsfiddle.net/yk2g333e আপনি জানেন যে টেক্সট কার্সারটি লাইন এবং ক্যারেটে নেমে গেছে, সুতরাং এই মুহুর্তে যদি কোনও বিরতি না থাকে তবে প্রাণবন্ত হওয়ার কিছুই নেই। তবে বিরতি দেওয়া ব্যবহারকারীর জন্য বিরক্তিকর হবে।

— ভাইটাওয়ালে

1

@ ব্যবহারকারী 2513846 তবে, টেক্সারিয়ার শেষে আরও একটি খালি লাইন দিয়ে, মসৃণ অ্যানিমেশনটি পাওয়া সম্ভব: jsfiddle.net/p23erdfr

— ভাতাবল

16

আপনি বর্তমান ক্লায়েন্টহাইট এবং সামগ্রী স্ক্রোলহাইটের উচ্চতর মান ব্যবহার করছেন। আপনি যখন সামগ্রীটি সরিয়ে স্ক্রোলহাইটটি আরও ছোট করেন, গণনা করা অঞ্চলটি ছোট হতে পারে না কারণ স্টাইল.হাইট দ্বারা পূর্বে সেট করা ক্লায়েন্টহাইটটি এটি উন্মুক্ত করে রেখেছে। আপনি এর পরিবর্তে সর্বাধিক () স্ক্রোলহাইট এবং ন্যূনতম উচ্চতার মান নিতে পারবেন যা আপনি পূর্বনির্ধারিত বা টেক্সারিয়া.রোজ থেকে গণনা করেছেন।

সাধারণভাবে আপনার সম্ভবত ফর্ম নিয়ন্ত্রণে স্ক্রোলহাইটের উপর নির্ভর করা উচিত নয়। অন্যান্য IE এক্সটেনশনের তুলনায় স্ক্রোলহাইট traditionতিহ্যগতভাবে কম বিস্তৃত-সমর্থিত হওয়া ছাড়াও এইচটিএমএল / সিএসএস অভ্যন্তরীণভাবে ফর্ম নিয়ন্ত্রণগুলি কীভাবে প্রয়োগ করা হয় এবং আপনার গ্যারান্টিযুক্ত নয় স্ক্রোলহাইট অর্থবহ কিছু হতে পারে সে সম্পর্কে কিছুই বলেনি। (Ditionতিহ্যগতভাবে কিছু ব্রাউজারগুলি কার্যের জন্য ওএস উইজেটগুলি ব্যবহার করেছে, যার ফলে তাদের অভ্যন্তরগুলিতে সিএসএস এবং ডোম ইন্টারঅ্যাকশনটি অসম্ভব হয়ে পড়েছে)) প্রভাব সক্রিয় করার চেষ্টা করার আগে কমপক্ষে স্ক্রোলহাইট / ক্লায়েন্টহাইটের অস্তিত্বের জন্য স্নিগ্ধ করুন।

সমস্যাটি এড়াতে আরেকটি সম্ভাব্য বিকল্প পদ্ধতির বিষয়টি যদি এটি গুরুত্বপূর্ণ যে এটি আরও ব্যাপকভাবে কাজ করা হতে পারে তবে এটি কোনও টেক্সারিয়ার মতো একই প্রস্থে একটি লুকানো ডিভি মাপ ব্যবহার করতে হবে এবং একই ফন্টে সেট করা যেতে পারে। কী-আপ-এ, আপনি টেক্সটরিয়া থেকে পাঠ্যটি লুকিয়ে থাকা ডিভের একটি পাঠ্য নোডে অনুলিপি করেছেন ('\ n' কে একটি লাইন ব্রেকের সাথে প্রতিস্থাপনের কথা মনে রেখে 'আপনি যদি অভ্যন্তরীণ এইচটিএমএল ব্যবহার করছেন তবে' <'/' & 'সঠিকভাবে পালাতে পারেন)। তারপরে কেবল ডিভের অফসেটহাইট পরিমাপ করা আপনাকে প্রয়োজনীয় উচ্চতা দেবে।

— bobince
সূত্র

1

scrollHeightটেক্সারিয়াসের জন্য কোন ব্রাউজারগুলির সমস্যা আছে বলে মনে করা হচ্ছে ? আইই, ফায়ারফক্স এবং অপেরা-র বর্তমান সংস্করণগুলির সাথে সূক্ষ্মভাবে কাজ করে ...

— ক্রিস্টোফ

1

আমার একমাত্র হস্তান্তরটি হ'ল কনকরার, যা ক্লায়েন্টহাইটকে স্ক্রোলহাইট হিসাবে ফিরিয়ে দেয়। এটি এমন একটি আচরণ যা আপনি আশা করতে পারেন যতক্ষণ না ব্রাউজার উইজেটগুলির ইন্টার্নালগুলিতে সিএসএস বক্স মডেল প্রয়োগ করে, এমন কিছু যা তারা সবসময় করেনি এবং স্ট্যান্ডার্ডটি বলে না যে তাদের আছে।

— বোবিনস

14

আপনার যদি IE8 সমর্থন করার প্রয়োজন না হয় আপনি inputইভেন্টটি ব্যবহার করতে পারেন :

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

এখন আপনাকে কেবল কয়েকটি সিএসএস যুক্ত করতে হবে এবং আপনার কাজ শেষ হয়েছে:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

ব্যবহার:

<textarea autoresize>Type here and I’ll resize.</textarea>

এটি আমার ব্লগ পোস্টে কীভাবে কাজ করে সে সম্পর্কে আপনি আরও পড়তে পারেন ।

— ম্যাক্সিমিলিয়ান হফম্যান
সূত্র

1

দুর্দান্ত সমাধান, তবে সামান্য সমাধান দরকার। যখন টেক্সারিয়ার সামগ্রী f.ex. ডাটাবেস থেকে, টেক্সারিয়া ছোট থাকুন। inputফোরচ চক্রের সূচনা করার সময় আপনাকে ইভেন্টটি ট্রিগার করতে হবে ।

— আজাক্স

11

স্বয়ংক্রিয়-আকৃতি

https://github.com/jackmoore/autosize

কেবলমাত্র কাজ করে, স্বতন্ত্র, জনপ্রিয় (অক্টোবর 2018 এর হিসাবে 3.0k + গিটহাব তারকারা), সিডিএনজেএস এ উপলব্ধ ) এবং লাইটওয়েট (~ 3.5 কে)। ডেমো:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>

স্নিপেট প্রসারিত করুন

বিটিডাব্লু, আপনি যদি এসি সম্পাদক ব্যবহার করছেন তবে ব্যবহার করুন maxLines: Infinity: এস ক্লাউড 9 সম্পাদকের সামগ্রীগুলিতে স্বয়ংক্রিয়ভাবে উচ্চতার সমন্বয় করুন

— সিরো সান্তিলি 郝海东冠状病六四事件法轮功
সূত্র

2

সংস্করণ 2 ফেব্রুয়ারী 2015 এ প্রকাশিত হয়েছে It এটি সহজ হয়ে উঠেছে এবং আর jQuery এর উপর নির্ভর করে না

— ক্রিস্পে

দুঃখিত, এটি কাজ করে। হতে পারে আমি অন্য ব্রাউজারে ছিলাম .. সুতরাং, আপনি আমার মন্তব্যটিকে অগ্রাহ্য করা ভাল বলে মনে করি ..

— টনি মিশেল কাবেট

@ টনিমিচেলকোবেট আহ, ঠিক আছে তখন সিডিএন সমস্যা। যাচাই করতে দাও.

— সিরো সান্তিলি :5 冠状病六四事件法轮功

autosizeপ্লাগ-ইন ম্যানুয়ালি পাঠ্য এলাকা মধ্যে পুনরায় আকার দেওয়ার আইকন ব্যবহার করে আকার পরিবর্তন করতে অনুমতি দেয় না।

— j4v1

7

এখান থেকে একটি লাইন পাওয়া গেছে ;

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

— 17K
সূত্র

6

কেউ কি সন্তোষজনক বলে বিবেচনা করেছেন? স্ক্রোলিংয়ের সাথে কোনও গোলযোগ নেই, কেবলমাত্র একটি এনডি এটিই পছন্দ করে তা যদি আপনি ঝাপসা করে ডেটা সংরক্ষণ করার পরিকল্পনা করেন ... এবং দৃশ্যত, এটি জনপ্রিয় ব্রাউজারগুলির সমস্তটির সাথে সামঞ্জস্যপূর্ণ: http://caniuse.com/#feat = contenteditable

কোনও পাঠ্য বাক্সের মতো দেখতে এটি কেবল স্টাইল করুন এবং এটি স্বয়ংক্রিয়ভাবে ... তার নূন্যতম উচ্চতাটিকে পছন্দসই পাঠ্যের উচ্চতা করুন এবং এতে থাকুন।

এই পদ্ধতির সম্পর্কে দুর্দান্ত যা আপনি ব্রাউজারগুলির কিছুতে সঞ্চয় এবং ট্যাগ করতে পারেন।

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>

— ওয়েবমাস্টার জি
সূত্র

ক্রোম ENTER এ <ডিভ> উপাদান যুক্ত করবে।

— sbaechler

contenteditableভাল, কিন্তু যদি আপনি প্লেইন চান এটা পছন্দ বিকল্প একটি গুচ্ছ প্রয়োজন -webkit-user-modify: read-write-plaintext-onlyএবং white-space: pre-wrap।

— mik01aj

@_sbaechler: <ডিভ> ব্যবহার করার সময় বাদ দেওয়া হয় [dom-element].innerText। @ ওয়েবেমাস্টারজি আইএমএইচও খুব ভাল লাগবে যে jquery বাদ দেওয়া (স্বচ্ছতার জন্য) এবং এই পৃষ্ঠায় উদাহরণটি জেসফিডেলের পরিবর্তে চলমান কোড স্নিপেটের মাধ্যমে অন্তর্ভুক্ত করা উচিত।

— adabru

4

আমি একাধিক পাঠ্যক্রমের জন্য নিম্নলিখিত কোড ব্যবহার করেছি। টেক্সটরিয়াসে মুছে ফেলা, কাটা এবং আটকানো ক্রিয়া সহ, ক্রোম 12, ফায়ারফক্স 5 এবং আই 9, তে দুর্দান্ত কাজ করছে Working

<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>
<script type='text/javascript'>
function attachAutoResizeEvents()
{   for(i=1;i<=4;i++)
    {   var txtX=document.getElementById('txt'+i)
        var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
        txtX.onchange=new Function("resize(this,"+minH+")")
        txtX.onkeyup=new Function("resize(this,"+minH+")")
        txtX.onchange(txtX,minH)
    }
}
function resize(txtX,minH)
{   txtX.style.height = 'auto' // required when delete, cut or paste is performed
    txtX.style.height = txtX.scrollHeight+'px'
    if(txtX.scrollHeight<=minH)
        txtX.style.height = minH+'px'
}
window.onload=attachAutoResizeEvents
</script>

— নিকুঞ্জ ভট্ট
সূত্র

4

কিছুটা ভিন্ন পন্থা আছে।

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

ধারণাটি হ'ল পাঠ্যটি অনুলিপি থেকে অনুলিপি textareaকরা preএবং সিএসএসকে নিশ্চিত করা দিন যে সেগুলি একই আকারে রয়েছে।

সুবিধাটি হ'ল ফ্রেমওয়ার্কগুলি কোনও ইভেন্টের স্পর্শ না করেই পাঠ্য সরানোর জন্য সহজ সরঞ্জাম উপস্থাপন করে। যেমন, AngularJS আপনি একটি যোগ হবে ng-model="foo" ng-trim="false"থেকে textareaএবং ng-bind="foo + '\n'"থেকে pre। একটি ঝাঁকুনি দেখুন ।

preএটির মতো ফন্টের আকারটি ঠিক আছে তা নিশ্চিত করুন textarea।

— কারোলিস জুডেল ė
সূত্র

1

" এটি নিশ্চিত করুন যে preএর ফন্টের আকারটি একই আকারে রয়েছেtextarea " - তাদের একইর প্রয়োজন হয় line-heightএবং সমান পরিমাণ paddingএবং / অথবা borderখুব বেশি। এটি কৌণিকের জন্য সেরা সমাধান।

— জেমি বার্কার

4

নিম্নলিখিত ক্রিয়াগুলি কাটা, আটকানো ইত্যাদির জন্য কাজ করে, এই ক্রিয়াগুলি মাউস, কীবোর্ড শর্টকাট, মেনু বার থেকে একটি বিকল্প নির্বাচন করে কিনা তা বিবেচনা না করে ... বেশ কয়েকটি উত্তর একই ধরণের পন্থা গ্রহণ করে তবে তারা বাক্স- সাইজিং, যার কারণে তারা ভুল করে স্টাইলটি প্রয়োগ করে overflow: hidden ।

আমি নিম্নলিখিত, যা ভাল কাজ করে এর কি max-heightএবং rowsসর্বনিম্ন এবং সর্বোচ্চ উচ্চতার জন্য।

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));

textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}

<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>

স্নিপেট প্রসারিত করুন

সম্পূর্ণ সম্পূর্ণতার জন্য, আপনার adjustআরও কয়েকটি পরিস্থিতিতে ফাংশনটি কল করা উচিত :

উইন্ডোটির আকারগুলি পুনরায় আকার দিন যদি প্রস্থের প্রস্থ হয় textarea পরিবর্তনের বা টেক্সারিয়ার প্রস্থ পরিবর্তনকারী অন্যান্য ইভেন্টগুলি
যখন textareaএর displayশৈলী বৈশিষ্ট্য পরিবর্তন, যেমন যখন তা থেকে যায় none(লুকানো) থেকেblock
যখন এর মান textareaপ্রোগ্রামক্রমে পরিবর্তন হয়

মনে রাখবেন যে ব্যবহার করা window.getComputedStyleবা পাওয়া currentStyleকিছুটা গণনামূলকভাবে ব্যয়বহুল হতে পারে, সুতরাং আপনি পরিবর্তে ফলাফলটি ক্যাশে করতে চাইতে পারেন।

আই 6 এর জন্য কাজ করে, তাই আমি আশা করি এটি যথেষ্ট ভাল সমর্থন enough

— জোসেফ নিল্ডস
সূত্র

4

ভিন্ন পদ্ধতির হিসাবে, আপনি <span>এমনটি ব্যবহার করতে পারেন যা স্বয়ংক্রিয়ভাবে এর আকারকে সামঞ্জস্য করে। আপনার contenteditable="true"সম্পত্তি যুক্ত করে এটি সম্পাদনযোগ্য করে তুলতে হবে এবং আপনি শেষ করেছেন:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

স্নিপেট প্রসারিত করুন

এই পদ্ধতির সাথে একমাত্র সমস্যাটি হ'ল যদি আপনি ফর্মের অংশ হিসাবে মানটি জমা করতে চান তবে আপনাকে জাভাস্ক্রিপ্টে নিজেরাই এটি করতে হবে। এটি করা তুলনামূলকভাবে সহজ। উদাহরণস্বরূপ, আপনি একটি লুকানো ক্ষেত্র যুক্ত করতে পারেন এবং onsubmitফর্মের spanক্ষেত্রে লুকানো ক্ষেত্রের জন্য মানটির নির্ধারণ করুন যা স্বয়ংক্রিয়ভাবে ফর্মের সাথে জমা দেওয়া হবে।

— র্যাকিল হিলান
সূত্র

: ইতিমধ্যেই এই পৃষ্ঠাতে contenteditable ব্যবহার করে একটি উত্তর stackoverflow.com/questions/454202/...

— adabru

@ অ্যাডাব্রু হ্যাঁ, তবে উত্তর দুটি একই নয়। টয়োটা লাল গাড়ি তৈরি করে, এবং ফোর্ডও লাল গাড়ি তৈরি করে, তবে সেগুলি আলাদা, তাই না? আপনি যদি অন্য উত্তরটি বেশি পছন্দ করেন তবে এটির সাথে যান। তবে এমন অনেকে আছেন যারা আমার উত্তরটির আরও প্রশংসা করেন এবং এর সাথে যান। বিভিন্ন অপশন থাকা ভাল।

— র্যাকিল হিলান

3

কিছুটা সংশোধন। অপেরাতে পুরোপুরি কাজ করে

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });

— artnik-প্রো
সূত্র

যতক্ষণ না আপনার লাইনগুলি উপচে পড়বে না - ততক্ষণ সেগুলি ফিট হবে না।

— টমো কাফকা

বাক্সের বাইরে কাজ করে, দুর্দান্ত (ফায়ারফক্স 72)

— মাইকিস

2

আমি jquery এর সাথে এটি বাস্তবায়নের একটি সংক্ষিপ্ত এবং সঠিক উপায় জানি hidden কোনও অতিরিক্ত গোপন ডিভ প্রয়োজন নেই এবং বেশিরভাগ ব্রাউজারে কাজ করে

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>

jQuery এর অবচয় .live()করা হয়েছে। api.jquery.com/live আপনি সাধারণত .on()পরিবর্তে ব্যবহার করতে চাইবেন ।

— লুক

2

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

textarea.setAttribute('rows',breaks);

ডেমো

— h0mayun
সূত্র

1

এটি যদি আপনার থাকে তবেই কাজ করে white-space: nowrap;। যখন একটি লাইন লাইন-ব্রেক ছাড়াই অন্য লাইনে আবৃত হয়, টেক্সারিয়া আর সঠিকভাবে সমন্বয় করা হবে না।

— ইয়েতি

2

পানিজির উত্তরের জন্য এখানে একটি কৌণিক নির্দেশ রয়েছে।

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

এইচটিএমএল:

<textarea ng-model="foo" auto-height></textarea>

— chrmcpn
সূত্র

আপনার পরিবর্তে সেটটাইমআউটের চেয়ে $ টাইমআউট ব্যবহার করা উচিত - এটি নিশ্চিত করবে যে মডেলটি আরম্ভ হবে (মিলিসেকেন্ড নির্দিষ্ট করার দরকার নেই - এটি কৌণিক ডাইজেস্ট চক্রের পরে কার্যকর হবে)। এছাড়াও উপাদান = উপাদান [0]; খুব খারাপ অনুশীলন ... যাইহোক, সমাধানটি আমার পক্ষে ভাল নয় কারণ আমার আরও পাঠ্য থাকা দরকার তবুও টেক্সারিয়াকে এক-লাইন হওয়া দরকার।

— ক্যারল ওয়েবস্কি

2

আপনি textareaটাইপ করার সময় প্রসারিত করতে JQuery ব্যবহার করতে পারেন :

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name="note"></textarea>
<div>

স্নিপেট প্রসারিত করুন

— মরিসিও সানচেজ
সূত্র

সবচেয়ে পরিষ্কার সমাধান। তবে যেহেতু আমাদের jQuery ব্যবহার বন্ধ করা উচিত: textarea.addEventListener ('keyup', () => {textarea.style.height = 0; Textarea.style.height = ${textarea.scrollHeight}px;;);

— টনি মিশেল কাউবেট

2

যারা কৌনিকের নতুন সংস্করণে একই অর্জন করতে চান।

টেক্সটআড়িয়া উপাদানআরফ গ্র্যাফ করুন।

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup)="autoGrow()" #textArea></textarea>

আমি আরেকটি ব্যবহারের ক্ষেত্রেও যুক্ত করছি যা থ্রেডটি পড়তে সক্ষম কিছু ব্যবহারকারীদের হাতে আসতে পারে, যখন ব্যবহারকারী পাঠ্য-ক্ষেত্রের উচ্চতা নির্দিষ্ট উচ্চতায় বৃদ্ধি করতে চান এবং তারপরে overflow:scrollএটি রাখতে চান, উল্লিখিত ব্যবহারের ক্ষেত্রে এটি অর্জনের জন্য উপরের পদ্ধতিটি বাড়ানো যেতে পারে।

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }

— দিব্যংশু রাওয়াত
সূত্র

1

এখানে কিছু উত্তর প্যাডিংয়ের জন্য অ্যাকাউন্ট করে না।

ধরে নিই যে আপনার সর্বোচ্চতা রয়েছে যা আপনি যেতে চান না, এটি আমার পক্ষে কাজ করেছে:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);

— hasen
সূত্র

1

একটি এমনকি সহজ, ক্লিনার পদ্ধতির এটি হ'ল:

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// এবং সিএসএস

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

.auto-heightক্লাসটি যে কোনও একটিতে যুক্ত করা দরকার addtextarea লক্ষ্য করতে চান ।

এফএফ, ক্রোম এবং সাফারি পরীক্ষিত। এটি কোনও কারণে যদি আপনার পক্ষে কাজ না করে তবে আমাকে জানান। তবে, এটি কাজ করতে আমি খুঁজে পেয়েছি এটি সবচেয়ে পরিষ্কার এবং সহজ উপায়। এবং এটি দুর্দান্ত কাজ করে! : ডি

— পুনরায় জীবত করা
সূত্র

আপনি কি সম্পাদনার পরে পাঠ্য সরানোর চেষ্টা করেছেন? টেক্সারিয়া কি ভেঙে গেল?

— 18 সি

1

এই কোডটি পেস্ট করার জন্য কাজ করে এবং মুছুনও নির্বাচন করুন।

onKeyPressTextMessage = function(){
			var textArea = event.currentTarget;
    	textArea.style.height = 'auto';
    	textArea.style.height = textArea.scrollHeight + 'px';
};

<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>

স্নিপেট প্রসারিত করুন

এখানে জেএসফিডাল

— কুরনাই কুনাই
সূত্র

1

আমি http://javierjulio.github.io/textarea-autosize থেকে জাভাস্ক্রিপ্ট লাইব্রেরিটি সুপারিশ করছি ।

প্রতি মন্তব্যগুলি, প্লাগইন ব্যবহারে উদাহরণস্বরূপ কোডব্লক যুক্ত করুন:

<textarea class="js-auto-size" rows="1"></textarea>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

ন্যূনতম প্রয়োজনীয় সিএসএস:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}

— orange01
সূত্র

1

MakeTextAreaResisable যা কিউকিয়ারি ব্যবহার করে

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}

— ইগর কৃপিতস্কি
সূত্র

1

উত্তরগুলির কোনওটিই কাজ করে বলে মনে হচ্ছে না। তবে এটি আমার জন্য কাজ করে: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();

— কিম হোমান
সূত্র

এটি "গ্রহণযোগ্য উত্তর হওয়া উচিত, যদিও এটি" কীআপ "ইভেন্টগুলি শোনার পক্ষে যথেষ্ট

— বব রস

1

আমার বাস্তবায়ন খুব সহজ, ইনপুটটিতে রেখার সংখ্যা গণনা করুন (এবং এটি টেক্সেরিয়া দেখানোর জন্য সর্বনিম্ন 2 টি সারি):

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

উদ্দীপনা সহ সম্পূর্ণ কার্যকারী উদাহরণ: https://jsbin.com/kajosolini/1/edit?html,js আউটপুট

(এবং এটি উদাহরণস্বরূপ ব্রাউজারের ম্যানুয়াল পুনরায় আকার হ্যান্ডেলের সাথে কাজ করে)

— localhostdotdev
সূত্র

2

আপনি কেবল "এন্টার" টিপে লাইনটি ভাঙ্গলে কেবল এটি কাজ করে। যদি আপনি পাঠ্যটি টেক্সেরিয়ার প্রস্থের চেয়ে দীর্ঘ হয় তবে আপনি "এন্টার" টিপেন না, এটি প্রসারিত হয় না।

— নাথালিয়া জাভিয়ের

1

গৃহীত উত্তর ঠিকঠাক কাজ করছে। তবে এই সাধারণ কার্যকারিতাটির জন্য কোডটি প্রচুর। নীচের কোডটি কৌশলটি করবে।

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });

— karthik_krish
সূত্র

0

টেক্সটরিয়ার জন্য এমভিসি এইচটিএমএল হেল্পার ব্যবহার করার সময় আমি যা করেছি তা এখানে। আমার বেশ কয়েকটি টেক্সারি উপাদান ছিল তাই তাদের মডেল আইডি ব্যবহার করে আলাদা করতে হবে।

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

এবং স্ক্রিপ্টে এটি যুক্ত করেছে:

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

আমি এটি IE10 এবং ফায়ারফক্স 23 এ পরীক্ষা করেছি

— gunnerz
সূত্র

0

আপনি এই কোডটি ব্যবহার করতে পারেন:

Coffescript:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

জাভাস্ক্রিপ্ট

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();

— Darex1991
সূত্র

অটো-রাইজাইয়ে একটি টেক্সারিয়া তৈরি করা হচ্ছে

একটি সম্পূর্ণ YET সিম্পল সলিউশন

বিকল্প 1 (jQuery সহ)

বিকল্প 2 (খাঁটি জাভাস্ক্রিপ্ট)

বিকল্প 3 (jQuery এক্সটেনশন)

টেক্সটরিয়ার মাধ্যমে জাভাস্ক্রিপ্ট আপডেট করা

প্রিন্ট টেক্সটরিয়া উচ্চতা