jquery.flexibleArea.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /*!
  2. * flexibleArea.js v1.0
  3. * A jQuery plugin that dynamically updates textarea's height to fit the content.
  4. * http://flaviusmatis.github.com/flexibleArea.js/
  5. *
  6. * Copyright 2012, Flavius Matis
  7. * Released under the MIT license.
  8. * http://flaviusmatis.github.com/license.html
  9. */
  10. (function($){
  11. var methods = {
  12. init : function() {
  13. var styles = [
  14. 'paddingTop',
  15. 'paddingRight',
  16. 'paddingBottom',
  17. 'paddingLeft',
  18. 'fontSize',
  19. 'lineHeight',
  20. 'fontFamily',
  21. 'width',
  22. 'fontWeight',
  23. 'border-top-width',
  24. 'border-right-width',
  25. 'border-bottom-width',
  26. 'border-left-width'
  27. ];
  28. return this.each( function() {
  29. if (this.type !== 'textarea') return false;
  30. var $textarea = $(this).css({'resize': 'none', overflow: 'hidden'});
  31. var $clone = $('<div></div>').css({
  32. 'position' : 'absolute',
  33. 'display' : 'none',
  34. 'word-wrap' : 'break-word',
  35. 'white-space' : 'pre-wrap',
  36. 'border-style' : 'solid'
  37. }).appendTo(document.body);
  38. // Apply textarea styles to clone
  39. for (var i=0; i < styles.length; i++) {
  40. $clone.css(styles[i],$textarea.css(styles[i]));
  41. }
  42. var textareaHeight = parseInt($textarea.css('height'), 10);
  43. var lineHeight = parseInt($textarea.css('line-height'), 10) || parseInt($textarea.css('font-size'), 10);
  44. var minheight = lineHeight * 2 > textareaHeight ? lineHeight * 2 : textareaHeight;
  45. var maxheight = parseInt($textarea.css('max-height'), 10) > -1 ? parseInt($textarea.css('max-height'), 10) : Number.MAX_VALUE;
  46. function updateHeight() {
  47. var textareaContent = $textarea.val().replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;').replace(/\n/g, '<br/>');
  48. // Adding an extra white space to make sure the last line is rendered.
  49. $clone.html(textareaContent + '&nbsp;');
  50. setHeightAndOverflow();
  51. }
  52. function setHeightAndOverflow(){
  53. var cloneHeight = $clone.height() + lineHeight;
  54. var overflow = 'hidden';
  55. var height = cloneHeight;
  56. if (cloneHeight > maxheight) {
  57. height = maxheight;
  58. overflow = 'auto';
  59. } else if (cloneHeight < minheight) {
  60. height = minheight;
  61. }
  62. if ($textarea.height() !== height) {
  63. $textarea.css({'overflow': overflow, 'height': height + 'px'});
  64. }
  65. }
  66. // Update textarea size on keyup, change, cut and paste
  67. $textarea.bind('keyup change cut paste', function(){
  68. updateHeight();
  69. });
  70. // Update textarea on window resize
  71. $(window).bind('resize', function (){
  72. var cleanWidth = parseInt($textarea.width(), 10);
  73. if ($clone.width() !== cleanWidth) {
  74. $clone.css({'width': cleanWidth + 'px'});
  75. updateHeight();
  76. }
  77. });
  78. // Update textarea on blur
  79. $textarea.bind('blur',function(){
  80. setHeightAndOverflow()
  81. });
  82. // Update textarea when needed
  83. $textarea.bind('updateHeight', function(){
  84. updateHeight();
  85. });
  86. // Wait until DOM is ready to fix IE7+ stupid bug
  87. $(function(){
  88. updateHeight();
  89. });
  90. });
  91. }
  92. };
  93. $.fn.flexible = function(method) {
  94. // Method calling logic
  95. if (methods[method]) {
  96. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  97. } else if (typeof method === 'object' || ! method) {
  98. return methods.init.apply(this, arguments);
  99. } else {
  100. $.error('Method ' + method + ' does not exist on jQuery.easyModal');
  101. }
  102. };
  103. })(jQuery);