22

Stackoverflow はサイズ変更可能なテキストエリアをどのように実装しますか?

それは彼らが独自に開発したものですか、それとも自分のサイトのテキストエリアに簡単にアタッチできる公開コンポーネントですか?

私はこの質問を見つけましたが、私が望むことはまったくありません。

自動サイズ変更テキストエリア

これは、テキストエリアの自動サイズ変更について詳しく説明していますが、私は上下にドラッグできる小さなグラブエリアが必要です。

4

5 に答える 5

25

StackOverflow は、jQuery プラグインを使用してこれを実現します: TextAreaResizer。

これを確認するのは簡単です。サイトからJSファイルを取得するだけです。

歴史的なメモ:この回答が最初に書かれたとき、WMD と TextAreaResizer は 2 つの別個のプラグインであり、どちらも SO 開発チームによって作成されたものではありません (参照: micahwittman の回答)。また、サイトの JavaScript は非常に読みやすいものでした...これらのどれも厳密には当てはまりませんが、TextAreaResizer は問題なく動作します。

于 2008-09-29T16:28:34.557 に答える
11

最近、同様の機能が必要でした。そのAutogrowと呼ばれ、素晴らしいjQueryライブラリのプラグインです。

于 2008-09-29T16:20:38.350 に答える
4

最初は、これはWysiwym Markdown エディターの組み込み機能だと思っていましたが、Shog9 は正しいです。まったく組み込みではありませんが、jQuery プラグイン TextAreaResizer の好意によるものです (チェックに使用していたブラウザーに惑わされました)。 Google Chrome自体がテキストエリアに展開可能な機能を追加するためです (Safari ブラウザと同様) 。

于 2008-09-29T16:20:26.290 に答える
0

AngularJS の使用:

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

これにより、すべてのテキストエリアが拡大/縮小するように変換されます。特定のテキストエリアのみを拡大/縮小する場合は、上部を次のように変更します。

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

それが役立つことを願っています!

于 2015-03-24T19:00:37.567 に答える