Autoexpanding textarea的使用jQuery

我需要<textarea>垂直成長，如在用戶類型，我發現這個代碼在網上http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm 我希望它被寫在jQuery但是我把代碼放到jQuery這是行不通的。Autoexpanding textarea的使用jQuery

這是JavaScript版本：

<textarea id="text"></textarea> 

var textArea = document.getElementById('text') 
textArea.addEventListener('input', function() { 
    while (
    textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) { 
     textArea.rows--; 
    } 
    var h = 0; 
    while (textArea.scrollHeight > textArea.offsetHeight && h !== textArea.offsetHeight) { 
     h = textArea.offsetHeight; 
     textArea.rows++; 
    } 
    textArea.rows++ 
});

小提琴http://jsfiddle.net/dcdeiv/dsL6g/3/

但我不希望使用一個ID或一類，我想，要對每個textarea的工作，所以我tryed使用一個每個功能：

<textarea></textarea> 

$.fn.growRows = function() { 
    return this.each(function() { 
     var textArea  = $(this), 
      scrollHeight = textArea.scrollTop(), 
      offsetHeight = textArea.height(), 
      rows   = textArea.attr(rows), 
      h   = 0; 

     textArea.keyup(function() { 

      while (rows > 1 && scrollHeight < offsetHeight) { 
       rows--; 
      } 

      while (scrollHeight > offsetHeight && h !== offsetHeight) { 
       h = offsetHeight; 
       rows++; 
      } 
      rows++; 
     }); 
    }); 
} 

$('textarea').growRows();

，但它不工作無論如何。

小提琴http://jsfiddle.net/dcdeiv/BQB4M/

來源

2014-06-30 dcdeiv

http://www.jacklmoore.com/autosize/ –

這可能不是你在找什麼，但看看我的fiddle。下面的代碼，以及：

$.fn.growRows = function() { 
    return this.each(function() { 
     var textArea = $(this); 

     textArea.on('keyup', function() { 
      textArea[0].rows = textArea.val().split('\n').length || 1; 
     }); 

     textArea.trigger('keyup'); //set initial size 
    }); 
}; 

$('textarea').growRows();

而且，在你的小提琴，你有可能會阻止你得到它的工作了幾個JavaScript錯誤。您需要將jQuery作爲庫包含在JSFiddle中，而textArea.attr（行）實際上需要textArea.attr（'rows'）。請注意，即使您進行了這些更改，您的小提琴也不起作用。當你增加/減少你的行變量時，什麼都不會發生。

來源

2014-06-30 20:31:33 ryanolsonx

那真的很簡單，只有幾行，所以它正是我期待的！謝謝！ – dcdeiv

只有使用'RETURN'鍵手動分解時纔會展開 –

如果你唯一擔心的是越來越不依賴的classes/ids所有textarea的，它仍然是可能使用getElementsByTagName('textarea')沒有jquery做。然後，以達到autoexpanding我們需要一個事件偵聽器結合而獲得的textarea的的，做了一些改動原來的代碼，我們得到：

HTML：

<textarea></textarea> 
<textarea></textarea>

使用Javascript：

var textArea = document.getElementsByTagName('textarea'); //get all textareas 
for (var i = 0; i <= textArea.length-1; i++) {   //loop through textareas 
    textArea[i].addEventListener('input', function() {  //binds listener 
    while (
    this.rows > 1 && this.scrollHeight < this.offsetHeight) { 
     this.rows--; 
    } 

    var h = 0; 
    while (this.scrollHeight > this.offsetHeight && h !== this.offsetHeight) { 
     h = this.offsetHeight; 
     this.rows++; 
    } 

    this.rows++ 
    }); 
}

FIDDLE：http://jsfiddle.net/dsL6g/6/

來源

2014-06-30 21:08:05

Autoexpanding textarea的使用jQuery

回答

相關問題