- PR -

フォーカス(タブ移動)が効かない

1
投稿者投稿内容
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-02-02 19:43
こんにちは。

環境：WinXP SP-3, Tomcat6, JDK 1.6, IE6
Dojo1.1 & SigmaGrid2.1と２つのJavascriptライブラリを使ってます。

この２つのツールの影響(特にSigmaGrid)が強くあり、回答が得られないかもしれませんが、よろしくお願いします。

現象としては、textにフォーカスが当たってるにも関わらず、上キーやタブを押しても、フォーカスが移動しません。
この画面自体は、SigmaGridとDojoが同居しているのですが、親画面にSigmaGridのツールを使った一覧が表示され、DojoのDialogを表示した時のこの画面に存在するtextにフォーカスが当たった時の発生します。

目視する限り、コードでもtextのフォカスは点滅しており、確かに当たっています。
アルファベットキーは確かにtextに追加もされます。

ですが、上キーやタブキーを押すと、親画面(一画面ですが)の一覧のActive行が動いてしまいます。

SigmaGridのツールがこのキーイベントのDomを保持しているのかもしれませんが、どうすれば良いのか分からない状態です。

アドバイス頂けたら幸いです。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-02-02 22:21
現象が再現するミニマムコードを〜こぴぺしても動かないかもしれないけど〜
提示できますか？

サーバー側ではなくて、ブラウザ上のコード〜特になんとかグリッド近辺の〜
を見せてください。



未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-02-02 23:51
ありがとうございます。

かなりscript処理が大きいアプリでして、
若干大きく省略してしまうかもしれませんが、
お分かりになりましたら、よろしくお願いします。
http://www.sigmawidgets.com/download.html

●親画面
<html>
<script type="text/javascript" src="/dojo/dojo/dojo.js" djConfig="isDebug: false"></script>
<script type="text/javascript" src="/SigmaGrid/gt_msg_en.js"></script>
<script type="text/javascript" src="/SigmaGrid/gt_grid_all.js"></script>
<script language="JavaScript">
<!--
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dojo.parser");

//SigmaGrid関連
var grid_id = "myGrid1" ;
var gridList = new Array();

var gridOption= {
fields :[
{name : 'ps_no'},
{name : 'ps_delete'}
],
uniqueField : 0 ,
recordType : 'array',
data : gridList
}

var gridColsOption = [
{id: 'ps_no', header : "No", headAlign:"center", align:"right" },
{id: 'ps_delete', header : "削除", headAlign:"center", align:"center"}
];

var gridOption={
id : grid_id,
container : 'gridbox1',
replaceContainer : true,
dataset : gridOption,
columns : gridColsOption ,
onClickCell : function(value, record , cell, row, colNO, rowNO, columnObj, grid){
//＠showDojoDialog(省略します)
dialogInit();
dojo.parser.parse("panel");
},
defaultRecord : ["",""],
pageSize:100,
toolbarContent : 'state',
showGridMenu : false,
allowCustomSkin : false,
allowHide : false
};

var mygrid1 = new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(mygrid1) );

-->
</script>
<body onLoad="body_onLoad()">
<!-- ＠showDojoDialogエリア -->
<div id="panel" style="display:none "></div>

<!-- ＠SigmaGrid一覧表示エリア -->
<div id="bigbox" style="display:!none;margin: 0px 10px 0px 10px;">
<div id="gridbox1" style="border:0px solid #cccccc;background-color:#f3f3f3;" ></div>
</div>
</body>
</html>

●Dialog(別ファイル)
<script>
function dialogInit() {
//このDialogが表示される時に走るscript
document.edit.name.focus();
};
</script>
<div dojoType="dijit.Dialog" id="panel" title="テスト">
<form name="edit" enctype="multipart/form-data" method="post" onkeydown="return Handler_keypress(event);" onSubmit="return false;">
<table width="360">
<tr>
<td nowrap><font style="font-size: 12pt;">名称</font></td>
<td nowrap><input type="text" name="name" size="40" maxlength="255" value=""/></td>
</tr>
<tr>
<td align="right" colspan="2">
<button dojoType='dijit.form.Button' label='編集'></button>
<button dojoType='dijit.form.Button' label='閉じる'></button>
</td>
</tr>
</table>
</form>
</div>

試して頂けたら、大変ありがたいのですが、かなり省略しています･･。
本来はAjaxで「Dialog表示」部を取得していたりと複雑な為･･、申し訳ありません。
また、DojoDialog全般に言えるのですが、これは別ファイルですが、htmlタグで完結したファイルでもない為、body_onloadが効きません。

ただ、このSigmaGridが親画面にある場合と無い場合では、このフォーカスの問題は起こりません。
上記のURLでDLしたアーカイブには、APIもあるのですが、clearFocus()らしきものもありません。

結論と推測を急ぐと、SigmaGridで行っているaddEventListnerをクリアする方法があれば良いのですが･･。取得方法とやり方が分かりません。

お分かりになりましたら、よろしくお願いします。

[ メッセージ編集済み 編集者: 未記入 編集日時 2009-02-02 23:52 ]

[ メッセージ編集済み 編集者: 未記入 編集日時 2009-02-02 23:54 ]

[ メッセージ編集済み 編集者: 未記入 編集日時 2009-02-03 10:16 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-02-03 01:19
Dojo のダイアログは何者ですか？
具体的かつ詳細に書いてください。

レイヤー被せているだけなら、、、、グリッドにフォーカスが当たらない
ようにするしか無いでしょうね。

未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-02-03 07:52
ぴあちゃんさん、ありがとうございます。

おっしゃるとおり、DojoのDialog(ほとんど標準仕様の物を使ってます)は、モーダルダイアログで、表示の時はCSSで後ろ(SigmaGridを使ってる親画面)が押下不能の状態となってます。
と言うか、なってた物と思ってました･･。

アプリを使う側は、このDialogを使う事で２画面に見えますが、HTMLのコードで見れば、一ファイルです(divの"panel"領域に子画面情報divを流し込んで、parseしている)。
なので、フォーカスが２つ存在しているとは考えにくく、キーを感知するEventListnerをSigmaGridのツールが内部で生成していると思っているんですが･･。

また、データ取得部を丸々削っていましたが、SigmaGridの一覧のデータ行を選択するとその行のデータが、Dialogの子画面に遷移し、編集が行えるような流れです。

明示的にフォーカスをクリアする方法はありませんでしょうか？


アルファベット・数字キーではtextに入力され、tabキー,上下左右キーでは一覧のActiveフォーカスが動く。同じwindowに対し、２つのフォーカスが同時に存在している？

[ メッセージ編集済み 編集者: 未記入 編集日時 2009-02-03 18:22 ]
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-02-03 21:59
一応、解決(？)しました。

そもそも、SigmaGridのツールでリスナーを生成しているのが悪いので、
こちらのkeyイベントのリスナーを全て除去しました。
あまり、公開ツールの中身を編集したくないのですが、それほど大きなソースでは無く、
このようにしました。

keyイベントなので、それほど影響があるとは思えませんし、今回の仕様では逆に無い方が良いので。
あまりお勧めはできませんが･･｡

ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）