テキストエリアの内容のためのストレッチングの増加

ウェブでは、ミネラルのヒントやアイデアの無尽蔵です。 インターネットは、定義、新しいアイデアをテストする毎日のcontunaが生まれている環境、他のいくつかの天才、単に好奇心と興味あること、です。

ウェブデザインの観点から、私が好む"特殊効果"の一つは、 ユーザーによって入力された大規模なテキストコンテンツのサイズが変更されたの動的管理です。 一言で言えば：あなたが書くとより多くのコンテンツがテキストエリアになります。 ビューの心理学的観点からそれは言ってのと同等の書き込みを続行するために招待状です"ねえ、あなたも書き込みしたいが、余地はない。"

この記事で私はこの素晴らしい効果を処理するための単純なJavaScript関数を提案する。 該当する関数は何もしませんが、内容はその自然な能力（回避し、実際には、落胆縦棒の外観）を超えた場合にtextareaを長引かせる。 コー​​ドは次のとおりです。

 moreWords機能（ID、maxheight）{



  



 / /テキストエリアのスタイルプロパティにアクセスするための変数を作成します。



  



 



 ID：のdocument.getElementById（id）を;



  

  



私は何もせずに出かけることができない/ /場合



  



 （！txtarea）リターン場合はtrue。



  

  



 / /テキストエリアの現在の高さに限り、最初に変数を作成します。



  



 VAR = newHeight txtarea.clientHeight;



  

  



高さが設定されていない場合や、これは現在よりも大きい/ /の場合...



  



 {|（maxheight> newHeight！| maxheight）場合



    

    



 / /コンテンツのnewHeight大きい高さ（scrollHeight）とその現在の値を識別するの値を再定義



    



 newHeight = Math.max（txtarea.scrollHeight、newHeight）;



    

    



 / /高さが設​​定されている場合..



    



場合（maxheight）



      



 / /最大の高さ（maxheight）とその現在の値のうち小さい方を識別するnewHeightの値を再定義



      



 newHeight = Math.min（maxheight、newHeight）;





    



計算された高さ（newHeightは）現在のテキストエリアよりも大きい/ /の場合



    



 / /変更を行って、テキストエリアを長く



    



 {（newHeight> txtarea.clientHeight）場合



      



 txtarea.style.height newHeight = +"ピクセル";



      



 txtarea.style.overflow ="隠された";



    



 }



  



 }



  



最大の高さに達している場合/ /スクロールバーを表示



  





    



 txtarea.style.overflowは="オート"。

  

  



 }

   





 }

この関数は二つのパラメータ、必須（効果を適用するテキストエリアのID）と（ピクセル単位で任意の高さ）、オプションを取ります。

私は信じて関数を作成するために使用される様々な手順については、すでにコード内のコメントを追加することはほとんどない。

関数の使用は非常に簡単です：私達のテキストエリアのonkeyupイベントは何もしない関数を起動しますが、高さは上に掲載コンテンツに適している場合は、押されたキーごとに、再計算します。

 



 <textarea onkeyup="moreWords(this)"> </ textarea>の

 

提案されたコードの作業例はで見ることができるこのページ 。

この関数の唯一の制限は、ユーザーを削除する場合は、テキストを縮小することができないことである... 私たちのコードはその収縮のためのスペースとしないの拡大のためだけに設計されているため、このケースでは、テキストエリアは、まだ古いサイズの縮小です。 ご希望の場合は、数行のコードを追加して、この機能を追加することができます。