2月 26 2010

カラムの高さを揃えるCSS

divをfloat:leftなどでカラム分けする時に左右のカラムの高さが違うと困る時がある。
と言うかいつも揃えていたい!!!

そんなときは

#親要素{
overflow:hidden;
}

#カラム1, #カラム2{
float:left;
margin-bottom:-32768px;
padding-bottom:32768px;
}

と指定してやると揃います。大きくパディングを取って背景をずっと下まで拡大した後
マージンで実際の要素の高さに戻して余った部分の背景をoverflow:hidden;を使って切ってるって事のようです。そしてなぜ「32768」かはどうもその値がIEの限界らしい。

≪参考サイト≫
http://w3-info.net/post-112.html

2月 25 2010

正規表現でカタカナを調べる

正規表現でカタカナだけかどうかを調べるのに結構苦労したのでメモ。
文字コードによって判別の仕方が違うようだ。

【UTF-8】

if(preg_match("/^[ァ-ヾ]+$/u",$str)){
  echo "カタカナのみです";
}else{
  echo "カタカナのみではありません";
}

if(preg_match("/^(¥xe3¥x82[¥xa1-¥xbf]|¥xe3¥x83[¥x80-¥xbe])+$/u",$str)){
  echo "カタカナのみです";
}else{
  echo "カタカナのみではありません";
}

UTFでは、修飾子『 u 』をつけないと、「ダ」を認識できないことがあります。(修飾子『 i 』などをあわせてつけたとき)

【EUC-JP】

if(preg_match("/^(¥xa5[¥xa1-¥xf6]|¥xa1[¥xb3¥xb4¥xbc])+$/",$str)){
  echo "カタカナのみです";
}else{
  echo "カタカナのみではありません";
}

EUC-JP では、文字の範囲指定をすると正しく認識できません。

【Shift-JIS】

if(preg_match("/^[ァ-ヶヽヾー]+$/",$str)){
  echo "カタカナのみです";
}else{
  echo "カタカナのみではありません";
}

if(preg_match("/^(¥x83[¥x40-¥x96]|¥x81[¥x52¥x53¥x5b])+$/",$str)){
  echo "カタカナのみです";
}else{
  echo "カタカナのみではありません";
}

Shift-JIS では、コードの範囲指定で¥x5bを使用すると下記のようなエラーが出ます。
Warning: Compilation failed: missing terminating ] for character class at offset 1
これは¥x5bが、『 [ 』を意味するためです。¥でエスケープし、¥¥x5bとすることで回避できます。

いろいろ調べるとpreg_match("/[ア-ヶ]/”,$str)ってのは出てくるのですが、文字コードで違うのは分かりませんでした。私はUTF-8でサイトを構築しているのだけどUTF-8
でpreg_match(“/[ア-ヶ]/”,$str)としてやるとどうもチ以降の判別が何かおかしいのですよね。文字コードでの違いを知って助かりました。

≪参考サイト≫
http://pentan.info/php/reg/is_kana.html

2月 24 2010

INSERTでUNIQUE重複データをUPDATEする

MYSQLでINSERTするときUNIQUEキーが重複した場合に自動でUPDATEしてくれる便利な構文

INSERT INTO table (a,b,c) VALUES (1,2,3)
  ON DUPLICATE KEY UPDATE c=c+1;

UPDATE table SET c=c+1 WHERE a=1;

<<参考サイト>>
http://dev.mysql.com/doc/refman/5.1/ja/insert-on-duplicate.html
http://d.hatena.ne.jp/IwamotoTakashi/20080329/p1

2月 12 2010

Jqueyでselectの値を取得

Jqueryを使って簡単にselectで選択されている値を取得。

<select id="test">
<option value="a">あ</option>
<option value="i">い</option>
</select>

以下のように取得

$('#test option:selected').text();

$('#test option:selected').val();

<<参考サイト>>
http://hatirobei.at.webry.info/200909/article_1.html

2月 12 2010

javascriptでfocusを移動

例えば郵便番号を入力してもらう時に前半と後半を3桁-4桁と分けた場合以下のようにしてやると前半3桁入力したら自動でカーソルが移動する

<form action="">
<input type="text" name="zip1" id="zip1" size="3" value="" onkeyup="CheckZip1()" />-<<nput type="text" name="zip2" id="zip2" size="4" value="" />
</form>
<script language="JavaScript">
<!--
function CheckZip1(){
	var zip1Val = document.getElementById("zip1").value;
	var zip1Length = zip1Val.length;
	//入力文字数が3の時に確認
	if( zip1Length == 3  ){
		if( ! zip1Val.match(/\d{3}/g) ){
			alert('郵便番号前半は半角数字3桁でご入力下さい');
		}
		//正しければzip2 focus
		else{
			document.getElementById("zip2").focus();
		}
	}
}
//-->
</script>