正在尋找類似於facebook的textarea resize插件

當您在Facebook上輸入評論時，評論textarea會在您輸入時自動調整大小。如果你點擊回車，它會發布評論，如果你點擊Ctrl + Enter，它會在調整大小時進入下一行。正在尋找類似於facebook的textarea resize插件

我正在尋找一個實現相同的事情的JavaScript/jQuery插件。

的大小調整文字區域順利而你的類型，如Facebook，適用於所有新的瀏覽器
能夠被動態調用，例如，如果一個新的textarea是通過JavaScript添加，它能夠正確稱爲之後並分配給該文本區域。
有一個選項/功能讓enter被忽略，並調用回調函數來發布用戶輸入時輸入的內容。
當按下Ctrl + Enter時，有一個選項/功能被推送到新行。

有什麼建議嗎？

來源

2012-07-30 Click Upvote

我不知道是否有這樣的插件已經存在，但如果你沒有找到你可以自己做。我想出了這個真正的快，maybye你可以用它作爲起始模板（絕不是完美的或做你需要的一切）：

http://jsfiddle.net/NfWAn/

<!doctype html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
     <script> 
      (function($) { 
       $.fn.smartText = function(options) { 

        var $this = $(this); 

        var defaults = { 
         size_interval : 15 
        }; 

        var settings = $.extend({}, defaults, options); 

        $('body').append('<div id="checkValHeight" style="display:none; word-wrap:break-word"></div>'); 
        var checkValHeight = $('#checkValHeight'); 

        $this.each(function() { 
         $this.addClass('smartText'); 
        }); 

        $('textarea.smartText').live('keyup paste', function() { 
         var $this = $(this); 
         var cur_height = $this.height(); 

         checkValHeight 
          .css({ 
           'width': $this.width() 
          }) 
          .html($this.val()); 

         if(checkValHeight.height() > cur_height) { 
          $this.css({ 
           'height': (cur_height + settings.size_interval) + 'px' 
          }); 
         } 

         checkValHeight.empty(); 
        }); 

        return $this; 
       } 
      })(jQuery); 
     </script> 
     <script> 
      $(function() { 

       $('textarea').smartText({ 
        size_interval: 30 
       }); 

       $('#addTextArea').click(function() { 
        $('body').append('<textarea class="smartText"></textarea>'); 
        return false; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

     <a href="#" id="addTextArea">Add Textarea [+]</a><br /> 

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

    </body> 
</html>

來源

2012-07-30 20:22:19 TK123

尼斯，它的工作原理，但似乎有點兒車。 1）如果設置了事件按鍵，而不是KEYUP，那麼有時你打字時，你有沒有達到行的末尾，你一半是在最後一行時，它跳躍。可能是因爲我按住鍵，所以html（）有一些舊的值，而不是新的值。2）有時你移動到下一行並得到一個滾動條，然後必須在滾動條消失。有任何想法嗎？ – 2012-07-30 21:24:13

@ClickUpvote對於＃2，您可以使用CSS修復textarea.smartText {overflow：hidden; }'。對於＃1，如果你按住同一個鍵，它會一直等到你放開將文本插入到隱藏的div中來計算值文本的高度。所以它不會實時更新textarea的高度。在任何情況下，我同意了整個劇本相當越野車，我花了大約10分鐘就可以了:)你應該改進它，甚至釋放它作爲一個插件，如果你這樣做。 – TK123 2012-07-30 22:26:21

感謝您的＃2 :)。如果更改KEYUP到按鍵事件，那麼它在實時更新，但是對於一些行，當你在一條線上已經完成了一半它擴展..我想你也許能夠更好地解決這個特定的錯誤比我 – 2012-07-30 23:12:44

正在尋找類似於facebook的textarea resize插件

回答

相關問題