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

StackOverflow https://stackoverflow.com/questions/149421

  •  02-07-2019
  •  | 
  •  

質問

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

彼らは自分で転がしたものなのか、それとも自分のサイトのテキストエリアに簡単にアタッチできる公に利用可能なコンポーネントなのか？

この質問を見つけたが、それは私が望んでいることにはならない。

autosizing-textarea

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

役に立ちましたか？

解決

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

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

歴史的注記：この回答が最初に記述されたとき、WMDとTextAreaResizerは2つの別個のプラグインであり、どちらもSO開発チームによって作成されたものではありません（micahwittmanの回答）。また、このサイトのJavaScriptは非常に読みやすくなっています...これらはいずれも厳密ではありませんが、TextAreaResizerは引き続き正常に機能します。

他のヒント

最近、同様の機能が必要になりました。 Autogrow と呼ばれ、驚くべき jQuery ライブラリ

最初は Wysiwym Markdownエディターの組み込み機能であると信じていましたが、Shog9は正しい：それはまったく焼き付けられていませんが、jQueryプラグインTextAreaResizerの礼儀です（ブラウザがエディターデモ。GoogleChrome自体が、Safariブラウザーのようにテキスト領域に拡張可能な機能を追加するためです。

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

役立つことを願っています！

これについてはどうですか、その作業

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top