https://einfo.ctimd.com/einfo/Content/Scripts/jquery.elastic.source.js

1/**
2*	@name							Elastic
3*	@descripton						Elastic is jQuery plugin that grow and shrink your textareas automatically
4*	@version						1.6.11
5*	@requires						jQuery 1.2.6+
6*
7*	@author							Jan Jarfalk
8*	@author-email					[email protected]
9*	@author-website					http://www.unwrongest.com
10*
11*	@licence						MIT License - http://www.opensource.org/licenses/mit-license.php
12*/
13
14(function($){ 
15	jQuery.fn.extend({  
16		elastic: function() {
17		
18			//	We will create a div clone of the textarea
19			//	by copying these attributes from the textarea to the div.
20			var mimics = [
21				'paddingTop',
22				'paddingRight',
23				'paddingBottom',
24				'paddingLeft',
25				'fontSize',
26				'lineHeight',
27				'fontFamily',
28				'width',
29				'fontWeight',
30				'border-top-width',
31				'border-right-width',
32				'border-bottom-width',
33				'border-left-width',
34				'borderTopStyle',
35				'borderTopColor',
36				'borderRightStyle',
37				'borderRightColor',
38				'borderBottomStyle',
39				'borderBottomColor',
40				'borderLeftStyle',
41				'borderLeftColor'
42				];
43			
44			return this.each( function() {
45
46				// Elastic only works on textareas
47				if ( this.type !== 'textarea' ) {
48					return false;
49				}
50					
51			var $textarea	= jQuery(this),
52				$twin		= jQuery('<div />').css({
53					'position'		: 'absolute',
54					'display'		: 'none',
55					'word-wrap'		: 'break-word',
56					'white-space'	:'pre-wrap'
57				}),
58				lineHeight	= parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
59				minheight	= parseInt($textarea.css('height'),10) || lineHeight*3,
60				maxheight	= parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
61				goalheight	= 0;
62				
63				// Opera returns max-height of -1 if not set
64				if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
65					
66				// Append the twin to the DOM
67				// We are going to meassure the height of this, not the textarea.
68				$twin.appendTo($textarea.parent());
69				
70				// Copy the essential styles (mimics) from the textarea to the twin
71				var i = mimics.length;
72				while(i--){
73					$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
74				}
75				
76				// Updates the width of the twin. (solution for textareas with widths in percent)
77				function setTwinWidth(){
78					var curatedWidth = Math.floor(parseInt($textarea.width(),10));
79					if($twin.width() !== curatedWidth){
80						$twin.css({'width': curatedWidth + 'px'});
81						
82						// Update height of textarea
83						update(true);
84					}
85				}
86				
87				// Sets a given height and overflow state on the textarea
88				function setHeightAndOverflow(height, overflow){
89				
90					var curratedHeight = Math.floor(parseInt(height,10));
91					if($textarea.height() !== curratedHeight){
92						$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
93					}
94				}
95				
96				// This function will update the height of the textarea if necessary 
97				function update(forced) {
98					
99					// Get curated content from the textarea.
100					var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/ {2}/g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
101					
102					// Compare curated content with curated twin.
103					var twinContent = $twin.html().replace(/<br>/ig,'<br />');
104					
105					if(forced || textareaContent+'&nbsp;' !== twinContent){
106					
107						// Add an extra white space so new rows are added when you are at the end of a row.
108						$twin.html(textareaContent+'&nbsp;');
109						
110						// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
111						if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
112							
113							var goalheight = $twin.height()+lineHeight;
114							if(goalheight >= maxheight) {
115								setHeightAndOverflow(maxheight,'auto');
116							} else if(goalheight <= minheight) {
117								setHeightAndOverflow(minheight,'hidden');
118							} else {
119								setHeightAndOverflow(goalheight,'hidden');
120							}
121							
122						}
123						
124					}
125					
126				}
127				
128				// Hide scrollbars
129				$textarea.css({'overflow':'hidden'});
130				
131				// Update textarea size on keyup, change, cut and paste
132				$textarea.bind('keyup change cut paste', function(){
133					update(); 
134				});
135				
136				// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
137				$(window).bind('resize', setTwinWidth);
138				$textarea.bind('resize', setTwinWidth);
139				$textarea.bind('update', update);
140				
141				// Compact textarea on blur
142				$textarea.bind('blur',function(){
143					if($twin.height() < maxheight){
144						if($twin.height() > minheight) {
145							$textarea.height($twin.height());
146						} else {
147							$textarea.height(minheight);
148						}
149					}
150				});
151				
152				// And this line is to catch the browser paste event
153				$textarea.bind('input paste',function(e){ setTimeout( update, 250); });				
154				
155				// Run update once when elastic is initialized
156				update();
157				
158			});
159			
160        } 
161    }); 
162})(jQuery);