- PR -

dojo widgetのダイアログで、テキストボックスにfocus()

1
投稿者投稿内容
はむねこ
会議室デビュー日: 2007/11/28
投稿数: 9
投稿日時: 2007-11-28 11:56
お世話になります。

dojoライブラリを使用したダイアログにて、
ダイアログ内のテキストボックスにフォーカスを当てる方法が分からず、
困っています。

以下のようなソースで、
document.getElementById('loginId').focus();
としても、有効になりません。

id指定がおかしいのかと思い、
document.getElementById('loginId').valueをalertさせると、
値は正しくとれます。

ヒントをいただけないでしょうか、よろしくお願い致します。

--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script language="javascript" src="js/dojo/dojo.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
dojo.require("dojo.widget.Dialog");

function init(e)
{
dlg = dojo.widget.byId("loginSmall");
var btn = document.getElementById("goLgn2");
dlg.setCloseControl(btn);
}
dojo.addOnLoad(init);

function open()
{
dlg.show();
alert(document.getElementById('loginId').value);
document.getElementById('loginId').focus();
}

-->
</script>

</head>
<body>
<a href="javascript:open();">ダイアログ表示</a>
<div id="loginSmall" dojoType="dialog" style="border:1px solid #000000;">
ダイアログです
<form method="post" action="" name="loginForm">
<input type="text" name="loginId" id="loginId" maxlength="8" size="25" value="daiou" />
<div id="goLgn2" style="cursor:pointer; margin-top:10px;">閉じる</div>
</form>
</div>
<body>
</html>
未記入
会議室デビュー日: 2006/06/15
投稿数: 5
投稿日時: 2007-11-28 23:38
結論としては

　変数 dlg がグローバルとなっていない為でしょう。

‘ダイアログ表示’リンク押下時に起動するファンクション open() の中で

変数 dlg なんて知らないよっ！って怒られてませんか。
はむねこ
会議室デビュー日: 2007/11/28
投稿数: 9
投稿日時: 2007-11-29 08:58
open()
でエラーはでていません。

dlg.show()でエラー無くダイアログ表示が成功しているので、
dlgが読めていないというわけでは無いと思うのですが。。
違いますか？

Firefoxでは、一度
document.getElementById('loginId').valueをalertさせた後だと、フォーカスします。
(IEでは相変わらずフォーカスしませんが)

一度なんらかの手順でidを認識させてやらないといけない
という感じなんでしょうか･･･？



[ メッセージ編集済み 編集者: はむねこ 編集日時 2007-11-29 10:18 ]
はむねこ
会議室デビュー日: 2007/11/28
投稿数: 9
投稿日時: 2007-11-29 18:56
解決しましたので報告しておきます。

http://blog.livedoor.jp/dankogai/archives/50893888.html
の
「DOMオブジェクトを生成した時点では、オブジェクトは有効になっていないのです。
解決法として、focusを遅延させるという手があります。」
というのを参考に、
focus処理を時間差で実行することにより成功しました。

open()のdlg.show();
の下に
setTimeout("document.getElementById('loginId').focus();", 100);
を記述することで無事フォーカスすることができました。


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

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