jQueryの：テキストエリアの"充填"を表示するプログレスバー

多くの場合、問題が予想よりも最も困難なことを証明、簡単に解決できるように見える、そしてそれは一般的に既に直面している人にとっては絶望的な、多かれ少なかれ正統と熱っぽく協議のウェブサイトを再試行半日の作業extricatingを失うことがあるということです問題。

私は私が数分で解決と思ったのtextareaに入力できる文字の数を制限する必要性を持っていたプロジェクトは、それがそうではなかったときに、私はネット上でいくつかの解決策を見つけたの意味がない最後に私を説得ので、私がすることを決めた使用して何かのカスタム実装jQueryと優れたjQueryUIをパッケージprogessbarの特定のコンポーネントには、。

必要なファイルの回復

へColleghiamoci http://jqueryui.com/と右上にあるボタン"のダウンロードカスタムビルド"をクリック。
次のページで有用なコンポーネントを選択し、そして我々は唯一のプログレスバーを利用することに利用できるウィジェットのひとつ。

我々は、右側のドロップダウンリストからグラフィックテンプレートを選択し、"ダウンロード"をクリックしてください。 先ほどダウンロードしたパッケージを解凍して、つのフォルダやルートにあるファイルを検索します。

• cssフォルダが我々の場合には、デフォルトのテーマを含む、UI -軽さ
• 開発バンドルには、例やドキュメントが含まれています
• JS：私たちのソリューションを実行するために必要な2つのファイルが入っています。JQueryと JQuery - UI - 1.4.4.min.js - 1.8.9.custom.min.js
• index.htmlを：私たちはテーマ /我々が選択したウィジェットの例を見ることができるページ

私たちの小さな例えば以下のように単純な構造を作成します。

• jQueryUIに解凍フォルダ（jquery - uiの- 1.8.9.custom）
• テキストエリアを含むfile.htmlのパッケージ
• jQueryのコードを含むfile.js

我々は、私たちのHTMLファイルを作成し、わかりやすい名前を（我々はmrw_jquery_txtcheck.htmlを呼ぶ）を与えると、必要なheadタグの封入体に挿入する：テーマのCSSファイルとJS、jQueryとjQueryUIへのリンクを。

 HREF ="jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css"<link type="text/css" rel="stylesheet" />







全トラックsrc="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ SCRIPT>







全トラックsrc="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ SCRIPT>

体のテキストエリアを追加します。

 



 <DIV> <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea>の</ DIV>

 

その後、プログレスバーとあなたにも数値がいくつあるか、文字のアイデアを与えるためにプレースホルダを含むdivを挿入します。

 <div style="height: id="progress" 20px;"> </ DIV>







利用可能な<P> <span id="charCounter"> 255 </ SPAN>の文字。</ P>

今、私たちは、headタグ内に含まれてその後も、我々はcheck_textarea.jsを呼ぶことに必要な機能を持つ別のファイルのJavaScript / jQueryのためのコードを書くに進むことができます。
すべての最初の基本的な変数を定義し、文字が許可され、利用可能なものは、冒頭で同じ値を持ちます。

 MAX_CHARS = 255;







 = MAX_CHARS残り;

その後、我々は、プログレスバーやカウンタを制御し、向上させる関数を定義します。

 checkTextareaLength関数（）{





  



 current_length ==未定義の変数名= $（"＃limitedOne"）。VAL（）。長さは？

 



 0：$（"＃limitedOne"）ヴァル（）長さ;。。



  



残り=（MAX_CHARS - current_length）;



	

  



場合（残り> 0）{

	

    



 $（"＃LimitedOne"）($("# LimitedOneヴァル"）ヴァル（）部分文字列（0、MAX_CHARS））。。。。



  



他に{}



    



 $（"＃CharCounter"）HTML（残り）。



    



 VAR PV =数学。床（（（（MAX_CHARS -残り）/ MAX_CHARS）* 100））;



    



 。$（'＃進行状況"）のプログレスバー（'値'、PV）;



  



 }







 }

コードを分析してみましょう：checkTextareaLengthの最初の行は関数VAL（）jQueryを使ってテキストエリアの現在の値を取得し、長さの属性を読み取ることによって入力された文字の数を数えます。
次の行に差が使用可能な文字数を示します。 この時点で2つの可能性があります。

1。 変数の残りと、ブロックがテキストエリアの値をピックアップし、ネイティブのJavaScriptの部分文字列を使用して255文字に制限されている場合、ゼロ （コピー/貼り付け後など） よりも小さい

 



 $（"＃LimitedOne"）($("# LimitedOneヴァル"）ヴァル（）部分文字列（0、MAX_CHARS））。。。。

 

2。 残りがゼロより大きい場合、他の残りの文字数で強化された最初のスパンでブロックする：

 



 $（"＃CharCounter"）HTML（残り）。

 

この関数は、利用可能な現在含まれ、それらの文字の最大数は、ライブラリ関数の丸め結果の数学。床（下）の間に最も近いの比率を計算します。

 



 VAR PV =数学。床（（（（MAX_CHARS -残り）/ MAX_CHARS）* 100））;

 

この時点で我々は唯一のプログレスバーで見つかった値を割り当てることができます

 



 。$（'＃進行状況"）のプログレスバー（'値'、PV）;

 

DOMレディに実行されるコードを書いてみましょう。
我々は、プログレスバーのバインドを初期化し、傍受するイベント実施： キープレス、mouseout、変更、およびぼかしを。 ユーザーがコピー/ペーストを使用する必要があるイベントをインターセプトするために、それらすべてを監視します。
関数呼び出しは、ネイティブ関数のsetTimeoutメソッドを介して第100分の数によって延期されていることに注意して、ユーザが入力を終えるときに、常に適切なタイミングで値を持つようにしてください。

 $（関数（）{



  



 $（"＃進行中"）のプログレスバー（）;



  



 $（"＃LimitedOne。"）バインド（"キー入力の変更mouseoutぼかし"、関数（）{



    



のsetTimeout（"checkTextareaLength（）"、200）;



  



 }）;







 }）;

• <<
• 1
• 第二
• >>