wpDiscuzのテキストエリアの高さを自動で変更しないようにする方法

wpDiscuzはwordpress標準のコメント機能を置換して高機能なコメントシステムを提供するプラグインです。これをつかっているとテキストエリアのinputイベントに反応してテキストエリアの高さが自動でかわってしまいます。

これを変えないようにする方法を解説してください

wpDiscuzのテキストエリアの高さが自動で変わる現象

wpDiscuzのテキストエリアは文字の入力に応じて高さが自動的にかわります。文字数が多くなると自動的に高さは高くなっていきます。

これはいいのですが、たとえばテキストエリアの高さを変更して、少し高くした状態にします。たとえば200pxにします。

この状態で文字を入力するとなぜか高さが自動的に縮小されます。この現象を発生しないようにします。

テキストのエリアを高さを自動で変更しないようにするcss

答えはこれです↓

#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea{
height: 209.333px !important;
}

このcssコードを適用するとwpDiscuzのテキストエリアの高さは自動で変更されなくなります。

ただしこのコードには問題点もあります。それは文字をたくさん入力してテキストエリアの高さをこえてしまった場合です。文字の量がテキストエリアの高さを超えた場合、テキストエリアの高さが固定化されてしまっているので、少しおかしなことになります。

ちなみにブラウザ標準のテキストエリアをみてみるとtextareaのカスケーディングスタイルはoverflow: auto;が設定されており、文字の量がテキストエリアを超えた場合はスクロールできるようになっています。

ただwpDiscuzのテキストエリアはoverflowの値が変更されているのでこのようにします↓

#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea{
height: 209.333px !important;
overflow: auto  !important;
}

ただこれでもまだ問題があります。それは文字数制限をしている場合スクロールバーとカウンター文字列がかぶってしまうというものです。これの対処方法については各々でかんがえていただければと思います。

雑感と余談 標準機能でもいいかも

とくにこだわりがなければテキストエリアの高さはそのままでもいいかもしれません。ただwpDiscuzのテキストエリアは100pxぐらいになっていて入力欄がみつけにくいという問題があると思います。

とりあえずテキストエリアを自動で変更しないようにする方法を解説しましたが、高さを自動で変えないようにすることで別の問題がみえてきたりします。といってもこれはシステム的な問題ではなく見た目な問題ですが、結局なにがいいたいのかというと、総合的に判断してテキストエリアをどうするか決める必用があるということです。