2009年7月9日木曜日

JavaScript onChangeとonkeypress及びonBlurの挙動関連

HTMLでEnterにてTAB移動する場合のイベントの使用方法で

onChange

onkeypress

onBlur

の組み合わせで行っているがこの組み合わせがうまく作動しない例としてメモ

まず onkeypress でTAB移動を制御、移動先で入力をすぐに出来るようにする為にselectプロパティで文字を選択状態にする。

onChangeにて入力変更部分を再表示等で制御
これはメッセージによる処理分岐を必要としない処理限定

上記以外の場合でメッセージによりキャンセルが必要な場合にonBlurを使用する。

そこでTAB移動先のテキストBOXにonBlurイベントによる変更があった場合にselectプロパティが無効になる場合がある。

その場合はonkeypressコマンドでの変更を余儀なくされる。

単純なタブ移動であれば、いろいろなサイトで紹介があるのでそれを用いるのがソースも少なく済みいいのだが、少し複雑な場合はそうはいかない。

ちなみに少し拡張で事が足りるのならonkeypressでとる引数を次のようにコントロール名称を抜く例をメモ

onkeypress=nextFocus(text1)
onkeypress=nextFocus(text2)




function(nextObj){
if(event.keyCode==13){
  if(nextObj.name!="text2"){
   nextObj.focus();
   nextObj.select();
   window.event.returnValue = false;
  }
}
}

これはテキスト2以外はEnterで飛ぶことになる。

この組み合わせで上記問題を回避することが可能(それ以外の方法はあると思うのだが・・・)

0 件のコメント: