適応高さのtextareaの作成

4342 ワード

javascript httml 5 html css 3

テキストボックスはよく見られる入力コントロールで、フォームを書いた人がtextareaという要素に触れたことがあると信じています.
OK.しかし、プロダクトマネージャは、ユーザーの入力内容に応じて高さを適応するには、このテキストボックスが必要だと話しています.
height: auto
一部の初心者は、適応高さはheight: autoではないかと思っているかもしれません.しかし、あなたは考えてみて、1つのtextareaは手でそれにスタイルを指定したことがなくて、デフォルトはheight: autoではありませんか?しかし、それはまだ独自の初期高さを持っていて、1つのdivのように高さが0ではありません.divとは異なり、textareaのデフォルトの高さは、その内容に応じて適応するのではなく、属性rowsによって指定され、そのデフォルト値は2である.rowsこの属性(Attribute)は正の整数のみを受け入れ、他の値を指定するとブラウザはその値を無視します.例えば、rows="auto"を書くとrowsは2で、rows="0"も2です.
したがって、height: autoを指定することはできません.height属性は、その値を手動で指定する必要があります.
scrollHeight
この問題に遭遇した同級生(例えば当初の筆者)は、scrollHeightというDOM属性を思い浮かべたに違いない.考え方は簡単で、ユーザーが入力したテキストがテキストボックス自体の高さを超えたときにスクロールバーが現れるのではないでしょうか.自然とscrollHeightという属性が考えられます.scrollHeightは、ユーザが入力したテキストの実際の高さであり、少なくともテキストボックスの既定の高さを超える場合にそうであるべきである.
では、問題は来ました.もし超えなかったら?
OK私はあなたが先にrows="1"を指定してテキストボックスのデフォルトの高さを1行だけにすることを知っています.しかし、この場合、ユーザーはまず多くの行のテキストを入力しました.
次のセクションを削除します.scrollHeight値に変化はありません.MDNでは、
垂直スクロールバーがない場合、scrollHeightの値は、要素ビューにすべてのコンテンツを埋め込むために必要な最小値clientHeightと同じです.scrollHeight確かにユーザの入力内容の多少によって増減するが、スクロールバーが発生する場合に限られ、スクロールバーが発生しないこと(厳密には可視領域を超えている)が必要であるため、問題設定には適用されないに違いない.scrollHeightの値を取得する前に、テキストボックスの高さを0に設定してスクロールバーを強制的に表示することができますが、ページが点滅し、パフォーマンスが低下する可能性があります.
split('')
DOM属性は当てにならないので、自分でテキストの高さを計算してはいけませんか?私がすべてのテキストを取り出して、改行で分割して、どれだけの行があるかを見て、 * は最終的なテキストの高さではありませんか?
ええ...テキストが折り曲げられていない場合はそうです.の
contenteditable
contenteditableは確かに実行可能な案ですが、穴を踏んだ先駆者としてあなたを説得します:やむを得ず、contenteditableは触らないでください.これはブラウザごとに実現が異なり、さまざまな奇抜な行為があり、改行符だけで半日苦しめることができます.
もちろんここまで複雑ではありませんが、「コピー——貼り付け」の過去のスタイルを削除しなければなりません.
筆者の方法
あんなにくだらないことを言ったのに、いったいどうすればいいのだろう.ここで筆者は一つの方法を提供する.
もちろん、まず、筆者の方法は必ずしも最も簡単ではないと宣言します.他のもっと簡単な案があれば、伝言を歓迎します.
考えてみましょう.textareaは内容に応じて高さを適応できません.divいいでしょう.まずテキストを1つのdivに記入することはできません.divの高さはテキストボックスに必要な高さであるはずです(padding、line-heightなどのスタイルが一致している場合)、このときdivの高さをテキストボックスの高さに付与すればいいのではないでしょうか.
このような考え方です.JSを使用して取得する必要はありません.divに親要素を支え、textarea要素を絶対的に配置してテキストボックス全体の親要素のサイズを満たすだけでいいです.
直接コード:



  
  </div></code></pre> 
 <p>        ：https://codepen.io/CarterLi/p...</p> 
 <p>    ：</p> 
 <ol> 
  <li>       <code>#dummy</code>   <code>textarea</code>          ，                  。</li> 
  <li> <code>#dummy</code>   <code>white-space: pre-wrap</code>   。      HTML     、      。</li> 
  <li>     <code>white-space: pre-wrap</code>，HTML            。       <code>#dummy</code>            。    <code><br/></code>，         。            <code>\A</code>（      ASCII   10        。    <code><br></code>）</li> 
 </ol> 
 <p>      JS   <code>#dummy</code>   。        <code>vuejs</code>   <code>angular</code>   MVVM   ，            <code>div</code>    ，    。</p> 
 <p>                ，  <code>#dummy</code>       <code>min-height</code> <code>max-height</code>   。</p> 
 <h2> </h2> 
 <p>     ：  <code>textarea</code>      <code>div</code>                     ，         。</p> 
</div>
                            </div>
                        </div>

WebSocketとnode.js

WebSocket入門