পিএইচপি বা জাভাস্ক্রিপ্ট না ব্যবহার করে এর সামগ্রীতে ফিট করার জন্য টেক্সারিয়া পাওয়ার কোনও উপায় আছে কি?

Question

আমি ব্যবহারকারীকে সম্পাদনা করার জন্য সামগ্রী সহ একটি টেক্সারিয়া পূরণ করছি।

সিএসএস ( overflow:showডিভের মতো) এর সাথে সামগ্রীতে ফিট করার জন্য এটি কী প্রসারিত করা সম্ভব ?

Comments

কারও কি এমন উত্তর নেই যা কোনও ফ্রেমওয়ার্ক ব্যবহার করে না এমন কোনও বাগ নেই? :-(

— তারাবিআমরিনবোলাব

আমি কেবল CSS সর্বাধিক প্রস্থ: 100% ব্যবহার করি এবং এটি স্বয়ংক্রিয়ভাবে একটি বাক্সে ফিট করে। তাতে কোন সমস্যা?

— yashas123

Answer 1

আসলে তা না. এটি সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করে করা হয়।

এখানে এটি করার বিভিন্ন উপায় সম্পর্কে একটি ভাল আলোচনা আছে ...

প্রোটোটাইপ ব্যবহার করে পাঠ্যক্রমের স্বয়ংক্রিয়করণ

Answer 2

শুধুমাত্র একটি লাইন

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

Comments

এটি কিভাবে মাত্র দুটি ভোট আছে? এটা অবিশ্বাস্য মার্টিন। আমি এটি সমাধানের চেষ্টা করে 30 মিনিট ব্যয় করেছি। মহান কাজ.

— ফিলিপ ডাফনি

এটা অসাধারণ. আমি যোগ করতে ঠিক যে পরিবর্তন চাই this.scrollHeight + "px"থেকে this.scrollHeight + 3 + "px"তোলে পাঠ্য এলাকা বড় যথেষ্ট এটা স্ক্রলবার প্রদর্শন করে।

— মার্টেন

সমস্যা: ব্যবহারকারী যখন নিচে স্ক্রোল করার জন্য যথেষ্ট লিখেন, প্রতিবার এন্টার সহ নতুন লাইন যুক্ত করার সময় এটি স্ক্রোলের অবস্থানটি পুনরায় সেট করে।

— কোস্টা

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমার সম্পাদনা পৃষ্ঠায় একটি টেক্সারিয়া আছে এবং পৃষ্ঠাটি লোড হওয়ার আগেই এর একটি মূল্য রয়েছে, আমি কীভাবে এটিকে বিষয়বস্তুর সাথে মানানসইভাবে প্রসারিত করতে পারি?

— অরোটিন আঘাজারিয়ান

@ অরোটিনআঘাজারিয়ান - আপনি ইতিমধ্যে সমাধানটি বের করতে পেরেছেন, তবে অন্য কারও জন্য: এইচটিএমএলটিতে ইনলাইন না হওয়ার পরিবর্তে পুনরায় আকার কোড সহ একটি ফাংশন তৈরি করুন। তারপরে আপনি পৃষ্ঠা লোডে একই ফাংশনটি কল করতে পারেন।

— ম্যাগনাস এরিকসন

Answer 3

এখানে একটি ফাংশন যা jQuery (শুধুমাত্র উচ্চতার জন্য, প্রস্থ নয়) এর সাথে কাজ করে:

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

দ্রষ্টব্য: অপ্সটি এমন একটি সমাধান চেয়েছিল যা জাভাস্ক্রিপ্ট ব্যবহার করে না, তবে এই প্রশ্নটি জুড়ে আসা অনেক ব্যক্তির পক্ষে এটি সহায়ক হওয়া উচিত।

Answer 4

এটি একটি খুব সহজ সমাধান, তবে এটি আমার জন্য কার্যকর:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

Comments

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

— বার্লেল

আই আই এর মতো কিছু ব্রাউজারগুলি সঠিকভাবে স্ক্রোলহাইট গণনা করে না, যা এই ধরণের সমস্যার কারণ হতে পারে। কিছু মনে করবেন না যে এটি আমার জন্য

— ক্রোমেও

এখানে সমাধান (সম্পাদনা কিউ পূর্ণ): <style> textarea { resize: none; overflow: auto; } </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){ this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; } </script>মূলত এই কারণে প্রথম 1px চাই, উচ্চতা সেট করতে হবে: stackoverflow.com/questions/10722058/...

— KthProg

Answer 5

গতিশীল পাঠ্য নিয়ন্ত্রণের জন্য আরও একটি সহজ সমাধান।

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>