まめしみ

やったことを淡々と書く


 

jQueryMobile(1.0b2)でフォーカスの装飾が残る問題がありました。
inputがページ上部にあると発生することがあります。

 

ソース解析したので原因まとめてみます。

フォーカスの装飾はcssのclass「ui-focus」で定義されています。
そしてfocusイベントでaddClass、blurイベントでremoveClassされます。
読み込み時にfocusさせclassが追加されますが実際にはfocusがちゃんとあたっていません。
そのため別の場所にfocusが移動してもblurイベントが起きずclassが残るようです。
jQueryMobileのバグともブラウザの仕様の問題とも解釈できる内容ですね。

 
1.0rc1では解消されていました。(もっと以前に解消されてるかも)
可能であればjQueryMobileのバージョンをあげてしまうのが手っ取り早いと思います。

既に公開中だとバージョンあげるのも怖いので対応方法を。
まずは該当部分の抜粋。

1.0b2

#2144行目
//define first selector to receive focus when a page is shown
focusable = "[tabindex],a,button:visible,select:visible,input",

#2192行目
//direct focus to the page title, or otherwise first focusable element
function reFocus( page ) {
    var lastClicked = page.jqmData( "lastClicked" );

    if( lastClicked && lastClicked.length ) {
        lastClicked.focus();
    }
    else {
        var pageTitle = page.find( ".ui-title:eq(0)" );

        if( pageTitle.length ) {
            pageTitle.focus();
        }
        else{
            page.find( focusable ).eq( 0 ).focus();
        }
    }
}

 

1.0rc1

#2223行目
//define first selector to receive focus when a page is shown
focusable = "[tabindex],a,button:visible,select:visible,input",

#2282行目
//direct focus to the page title, or otherwise first focusable element
function reFocus( page ) {
	var pageTitle = page.find( ".ui-title:eq(0)" );

	if( pageTitle.length ) {
		pageTitle.focus();
	}
	else{
		page.focus();
	}
}


セレクタ「focusable」で最初に見つけたものにフォーカスを当ててます。
これがよろしくないので、1.0rc1と同様に「page.focus();」にすればいいと思います。
ソースを弄るのを避けたい場合、「page.find( focusable ).eq( 0 )」がinputにならないように調整して対応することもできます。

 
1.0rc1でfocusableの定義残ってますがここ以外では使用されていません。消し忘れ?

 

You can leave a response, or trackback from your own site.

Leave a Reply