আমি রিগেলের (স্বীকৃত উত্তর) প্রদত্ত উত্তরে কয়েকটি বাগ ঠিক করেছি:
- এইচটিএমএল সত্তাগুলি এখন যে ক্রমে প্রতিস্থাপন করা হয়েছে তা ছায়া উপাদানটিতে অপ্রত্যাশিত কোড তৈরি করে না। (মূলটি ">" দ্বারা "& ampgt;" প্রতিস্থাপন করা হয়েছে, কিছু বিরল ক্ষেত্রে উচ্চতার ভুল গণনা ঘটায়)।
- যদি পাঠ্যটি একটি নতুন লাইন দিয়ে শেষ হয়, তবে ছায়া এখন একটি অতিরিক্ত যুক্ত অক্ষর পাবে, পরিবর্তে মূলের ক্ষেত্রে যেমন উচ্চতা থাকবে "#"।
- আরম্ভের পরে টেক্সেরিয়াকে পুনরায় আকার দেওয়া ছায়ার প্রস্থকে আপডেট করে।
- যুক্ত শব্দ-মোড়ানো: ছায়ার জন্য বিরতি শব্দ, সুতরাং এটি একটি টেক্সারিয়ার মতোই ব্রেক হয় (খুব দীর্ঘ শব্দের জন্য বিরতি জোর করে)
শূন্যস্থান সংক্রান্ত কিছু বাকি সমস্যা রয়েছে। আমি ডাবল স্পেসের কোনও সমাধান দেখতে পাচ্ছি না, এগুলি ছায়ায় একক স্পেস হিসাবে প্রদর্শিত হবে (এইচটিএমএল রেন্ডারিং)। & Nbsp; ব্যবহার করে এটি বপন করা যাবে না, কারণ স্পেসগুলি ভাঙা উচিত। এছাড়াও, টেক্সেরিয়া কোনও স্থানের পরে একটি লাইন ভেঙে দেয়, যদি সেই জায়গার জন্য কোনও স্থান না থাকে তবে এটি পূর্ব বিন্দুতে লাইনটি ভেঙে দেবে। পরামর্শ স্বাগত জানাই।
সংশোধিত কোড:
(function ($) {
$.fn.autogrow = function (options) {
var $this, minHeight, lineHeight, shadow, update;
this.filter('textarea').each(function () {
$this = $(this);
minHeight = $this.height();
lineHeight = $this.css('lineHeight');
$this.css('overflow','hidden');
shadow = $('<div></div>').css({
position: 'absolute',
'word-wrap': 'break-word',
top: -10000,
left: -10000,
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize: 'none'
}).appendTo(document.body);
update = function () {
shadow.css('width', $(this).width());
var val = this.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br/>')
.replace(/\s/g,' ');
if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minHeight));
};
$this.change(update).keyup(update).keydown(update);
update.apply(this);
});
return this;
};
}(jQuery));