WEB受注システムjavascriptの小技・まとめ一覧このページの主なコンテンツは「CSS、jQuery等のテストページ」からの転載、もしくは追加解説です。padding、border-width、marginを含んで取得テキストエリアの入力文字数をカウントして制限文字数(例は100字)を超えると、注意を表示テキストエリア内の入力した文字数をカウントし、制限も字数をこえたところで、カウント数値の文字色を赤紫でボールドに変更、さらに「制限オーバーです。」を赤色文字で表示します。文字を制限内に減らせば元に戻ります。101){$("#mojicount").css("color","#bd0fa6");$("#mojicount").css("font-weight","bold");$("#mojicount2").css("font-weight","bold");$("#mojicount2").css("color","red");$("#mojicount2").text("制限オーバーです。");}});});ChromeやSafariなどwebkit系ブラウザのonfocusの動きをフィックステキストフィールドをonfocusして内容をコピーしたいとき、モダンブラウザでは、下記のように「onfocus」を使い、マウス左クリック1回で内容をすべて選択できます。ChromeやSafariなどwebkit系ブラウザではできません。これは仕様のようですが、それを他のブラウザ同様にマウス左クリック1回で内容をすべて選択できるようにするため「onfocus」を次のように書き換えます。onfocus="setTimeout(function(){document.「form名」.「textField名」.select()},0);確認用テキストフィールド2:今度は、webkit系ブラウザでも一度のクリックで選択できます。Storageとは、ブラウザ標準で利用できるHTML5のデータストアの一種で、データを特定するための名前(key)と値との組み合わせでデータを管理するKey-Value型データストアです。Storageは5MBまで保存できます。Storageにはありません。Storageには2種類あります。Storageブラウザが起動している間だけ有効で、終了するとデータは削除されます。Storageブラウザを終了しても、データが保持されます。Storageのサンプルです。テキストフォールドになにか入力後、「データ保存」クリックで、データをローカルに保存します。「データ読み込み」ボタンクリックで、保存した内容を表示します。ブラウザを終了しても保存したデータは保持されます。Storageのテストデータ保存データ読み込み・最終保存時刻(ローカル):・データ:→元記事(scriptのソースもこちら)document.writelnでテキストの文字列を書き込み後、正しく改行させる。document.writelnは、document.writeと同じくテキストの文字列を書き込みますが、その直後に改行文字を追加します。ブラウザによっては、改行文字を半角スペースとして認識してしまい改行されません。そこで次のようにします。class='blue'>サンプルテキスト1:<p>");document.write("この文章は、");document.write("改行されません。class='blue2'>サンプルテキスト2:F<p>");document.writeln("こちらの文章は、");document.writeln("改行されます。padding、border-width、marginを含んで取得javascriptでDOM要素の縦横サイズを取得する際、paddingやborder-width、marginを含んだ値が必要なことがあります。次のサンプルのように値を取り出すと、paddingやborder-width、marginが含まれません。次のようにinnerWidth()、outerWidth()、outerWidth(true)を利用することで、paddingやborder-width、marginを含んだ値を取り出すことができます。高さについても同様に、innerHeight()、outerHeight()、outerHeight(true)を使います。●サンプル下の画像は、次のように指定したものです。