मैंने रीगेल द्वारा दिए गए उत्तर (स्वीकृत उत्तर) में कुछ कीड़े तय किए:
- जिस क्रम में html संस्थाओं को प्रतिस्थापित किया जाता है, वह छाया तत्व में अप्रत्याशित कोड का कारण नहीं बनता है। (मूल स्थान ">" द्वारा "& ampgt;", कुछ दुर्लभ मामलों में ऊंचाई की गलत गणना का कारण बनता है)।
- यदि पाठ एक नई रेखा के साथ समाप्त होता है, तो छाया को एक अतिरिक्त वर्ण "#" मिलता है, बजाय एक निश्चित अतिरिक्त ऊंचाई के, जैसा कि मूल में है।
- आरंभीकरण के बाद टेक्सारिया का आकार बदलना छाया की चौड़ाई को अद्यतन करता है।
- जोड़ा गया शब्द-आवरण: छाया के लिए ब्रेक-वर्ड, इसलिए यह एक textarea के रूप में एक ही टूट जाता है (बहुत लंबे शब्दों के लिए मजबूर करता है)
रिक्त स्थान से संबंधित कुछ शेष मुद्दे हैं। मुझे डबल स्पेस के लिए कोई समाधान दिखाई नहीं देता, वे छाया (html रेंडरिंग) में सिंगल स्पेस के रूप में प्रदर्शित होते हैं। यह रिक्त स्थान के टूटने के कारण & 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));