web-dev-qa-db-ja.com

サイズ変更可能なテキストエリアを実装しますか？

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

それは彼らが自分たちで作成したものですか、それとも自分のサイトのテキストエリアに簡単に添付できる公開されているコンポーネントですか？

私はこの質問を見つけました、そしてそれは私が望むことを完全にはしません。

autosizing-textarea

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

htmlresizetextarea
22
Mark Biek

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

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

歴史的注記：この回答が最初に書かれたとき、WMDとTextAreaResizerは2つの別個のプラグインであり、どちらもSO開発チーム（参照： micahwittmanの回答 ）また、サイトのJavaScriptは非常に読みやすかったです...これらはどれも厳密にもう本当ですが、TextAreaResizerはまだ問題なく動作します。

25
Shog9

最近、同様の機能が必要でした。それは Autogrow と呼ばれ、驚くべき jQuery ライブラリのプラグインです。

11
Roman Ganz

最初はそれが Wysiwym Markdownエディター の組み込み機能だと思っていましたが、Shog9は正しいです：まったく組み込まれていませんが、jQueryプラグインTextAreaResizerのおかげです（私は道に迷いましたブラウザが エディタデモ をチェックするために使用していたのは、Google Chrome自体がSafariブラウザと同じようにテキストエリアに拡張可能な機能を追加するためです）。

4
micahwittman

これはどうですか、その仕事

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
0
Martin Prestone

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',

お役に立てば幸いです。

0
benshope