JQuery 移动设备强制 VoiceOver 在 GotoPage 之后关注标题
JQuery Mobile force VoiceOver to focus on title after GotoPage
JQuery mobile
和 VoiceOver
处于活动状态,在
更改页面后
$.mobile.changePage("page1.html");
VoiceOver
不要关注标题。
我想强制VoiceOver
的焦点阅读新页面的标题
NOT 工作测试:
$(".ui-page-active .ui-title").click().focus().tap();
$(".ui-page-active .ui-title").trigger("create");
$(".ui-page-active .ui-title").attr("role","alert");
$(".ui-page-active .ui-title").attr("role","dialog");
测试页,并不总是有效
https://jsfiddle.net/218xLbwd/14/
解决方案:使用 beforeshow 事件来关注标题。
也感谢 Eric D. Johnson 的努力
//for Jquery till 1.4.0
$(document).on('pagebeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
//for Jquery 1.6.0+
$(document).on('pagecontainerbeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
更新:使用 jQuery 手机
Whosebug 代码段没有 运行,因此请参阅 https://jsfiddle.net/EricOP/wo40z1m9/3/
HTML
<div data-role="header">
<h1>Foo</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the first page.</p>
<p>View internal page called <a id="barclick" href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
CSS
/* CSS to prevent weird blue border in Chrome after setting focus */
h2:focus { outline: 0; }
JS
(function() {
// For changing to a specific page.
// Also see https://api.jquerymobile.com/pagecontainer/#event-beforeshow which was helpful for Sano.
$("#bar").on('pageshow', function(barPage) {
console.warn('Pageshow on bar, Sano.', barPage);
$("h1:visible").attr('tabindex', "-1");
$("h1:visible").css('background-color', '#aaa');
$("h1:visible").focus();
});
// For changing between all jQuery Mobile pages. https://api.jquerymobile.com/pagecontainer/#event-change
$(document).on('pagecontainerchange', function() {
console.warn('New cool event, that always triggers, Pagecontainerchange on document, Sano.');
$("h1:visible").attr('tabindex', "-1");
$("h1:visible").css('color', '#dd4814');
$("h1:visible").focus();
});
})();
从事件 (https://api.jquerymobile.com/pagecontainer/#event-change )、承诺或回调中触发比使用定时等待更好,这样可以避免不必猜测渲染显示更改需要多长时间。
Sano 特别提到 https://api.jquerymobile.com/pagecontainer/#event-beforeshow 很有帮助。
//for jQuery until 1.4.0
$(document).on('pagebeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
//for jQuery 1.6.0+ (Also works for 1.4)
$(document).on('pagecontainerbeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
JQuery mobile
和 VoiceOver
处于活动状态,在
$.mobile.changePage("page1.html");
VoiceOver
不要关注标题。
我想强制VoiceOver
的焦点阅读新页面的标题
NOT 工作测试:
$(".ui-page-active .ui-title").click().focus().tap();
$(".ui-page-active .ui-title").trigger("create");
$(".ui-page-active .ui-title").attr("role","alert");
$(".ui-page-active .ui-title").attr("role","dialog");
测试页,并不总是有效 https://jsfiddle.net/218xLbwd/14/
解决方案:使用 beforeshow 事件来关注标题。 也感谢 Eric D. Johnson 的努力
//for Jquery till 1.4.0
$(document).on('pagebeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
//for Jquery 1.6.0+
$(document).on('pagecontainerbeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
更新:使用 jQuery 手机
Whosebug 代码段没有 运行,因此请参阅 https://jsfiddle.net/EricOP/wo40z1m9/3/
HTML
<div data-role="header">
<h1>Foo</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the first page.</p>
<p>View internal page called <a id="barclick" href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
CSS
/* CSS to prevent weird blue border in Chrome after setting focus */
h2:focus { outline: 0; }
JS
(function() {
// For changing to a specific page.
// Also see https://api.jquerymobile.com/pagecontainer/#event-beforeshow which was helpful for Sano.
$("#bar").on('pageshow', function(barPage) {
console.warn('Pageshow on bar, Sano.', barPage);
$("h1:visible").attr('tabindex', "-1");
$("h1:visible").css('background-color', '#aaa');
$("h1:visible").focus();
});
// For changing between all jQuery Mobile pages. https://api.jquerymobile.com/pagecontainer/#event-change
$(document).on('pagecontainerchange', function() {
console.warn('New cool event, that always triggers, Pagecontainerchange on document, Sano.');
$("h1:visible").attr('tabindex', "-1");
$("h1:visible").css('color', '#dd4814');
$("h1:visible").focus();
});
})();
从事件 (https://api.jquerymobile.com/pagecontainer/#event-change )、承诺或回调中触发比使用定时等待更好,这样可以避免不必猜测渲染显示更改需要多长时间。
Sano 特别提到 https://api.jquerymobile.com/pagecontainer/#event-beforeshow 很有帮助。
//for jQuery until 1.4.0
$(document).on('pagebeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});
//for jQuery 1.6.0+ (Also works for 1.4)
$(document).on('pagecontainerbeforeshow', function() {
$(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
$(".ui-page-active > .ui-header h1").focus();
});