コニファ：javascriptの小技・まとめ

テキストエリア内の入力した文字数をカウントし、制限も字数をこえたところで、カウント数値の文字色を赤紫でボールドに変更、さらに「制限オーバーです。」を赤色文字で表示します。文字を制限内に減らせば元に戻ります。
制限文字数は、 if(counter >= 101)で設定。　→元記事

$(function () {
	$("textarea").keyup(function(){
		var counter = $(this).val().length;
		$("#mojicount").text(counter);
		if(counter == 0){
			$("#mojicount").text("0");
			$("#mojicount").css("font-weight","normal");
		}
		if(counter >= 101){
			$("#mojicount").css("color","#bd0fa6");
			$("#mojicount").css("font-weight","bold");
			$("#mojicount2").css("font-weight","bold");
			$("#mojicount2").css("color","red");
			$("#mojicount2").text("制限オーバーです。");
		} 
		else{$("#mojicount").css("color","#666");
			$("#mojicount2").text(" ");}
		});
	});

テキストフィールドをonfocusして内容をコピーしたいとき、モダンブラウザでは、下記のように「onfocus」を使い、マウス左クリック1回で内容をすべて選択できます。

<input type="text" onfocus="this.select();" value="マウス左クリック1回で内容をすべて選択" />

確認用テキストフィールド1：

しかし、Google ChromeやSafariなどwebkit系ブラウザではできません。これは仕様のようですが、それを他のブラウザ同様にマウス左クリック1回で内容をすべて選択できるようにするため「onfocus」を次のように書き換えます。

onfocus="setTimeout(function(){document.「form名」.「textField名」.select()},0);	

確認用テキストフィールド2：

今度は、webkit系ブラウザでも一度のクリックで選択できます。

→元記事

Web Storageとは、ブラウザ標準で利用できるHTML5のデータストアの一種で、データを特定するための名前（key）と値との組み合わせでデータを管理するKey-Value型データストアです。

従来からのcookieと比べると、データサイズは、cookieが4KBに対して、Web Storageは5MBまで保存できます。またcookieは有効期限がありますが、Web Storageにはありません。

Web Storageには2種類あります。

・Session Storage
ブラウザが起動している間だけ有効で、終了するとデータは削除されます。
・Local Storage
ブラウザを終了しても、データが保持されます。

以下はLocal Storageのサンプルです。テキストフォールドになにか入力後、「データ保存」クリックで、データをローカルに保存します。「データ読み込み」ボタンクリックで、保存した内容を表示します。また、ブラウザを終了しても保存したデータは保持されます。

document.writelnは、document.writeと同じくテキストの文字列を書き込みますが、その直後に改行文字を追加します。 ただ、ブラウザによっては、改行文字を半角スペースとして認識してしまい改行されません。

そこで次のようにします。

● <pre>タグで囲う

<pre class="text1">
<script>
document.open();
document.write("<p class='blue'>サンプルテキスト1：<p>");
document.write("この文章は、");
document.write("改行されません。");
document.writeln("<br>");
document.write("<p class='blue2'>サンプルテキスト2：F<p>");
document.writeln("こちらの文章は、");
document.writeln("改行されます。");
document.close();
</script>
</pre>

● スクリプト内にて、<pre>タグで囲う

<script>
document.open();
document.write("<pre class='text1'>");
document.write("<p class='blue'>サンプルテキスト1：<p>");
document.write("この文章は、");
---中略---
document.write("<\/pre>");
document.close();
</script>

javascriptでDOM要素の縦横サイズを取得する際、paddingやborder-width、marginを含んだ値が必要なことがあります。次のサンプルのように値を取り出すと、paddingやborder-width、marginが含まれません。

var 変数 = $('#box').width(); //widthのみの値

次のようにinnerWidth()、outerWidth()、outerWidth(true)を利用することで、paddingやborder-width、marginを含んだ値を取り出すことができます。 高さについても同様に、innerHeight()、outerHeight()、outerHeight(true)を使います。 　

●サンプル

下の画像は、次のように指定したものです。
「width: 200px; height: 150px; padding: 10px; border-width: 20px; margin: 10px;」

横サイズ：

var 変数 = $('#box').innerWidth(); //width + padding の値 220px
var 変数 = $('#box').outerWidth(); //width + padding + border-width の値 260px
var 変数 = $('#box').outerWidth(true); //width + padding + border-width +　margin　の値 280px

縦サイズ：

var 変数 = $('#box').innerHeight(); //height + padding の値　170px
var 変数 = $('#box').outerHeight(); //height + padding + border-width の値　210px
var 変数 = $('#box').outerHeight(true); //height + padding + border-width +　margin　の値 230px

→元記事（scriptのソースもこちら）