Question

在使用

更改页面后，JQuery mobile和VoiceOver处于有效状态

$.mobile.changePage("page1.html");

VoiceOver不要专注于标题。我想强制VoiceOver的焦点来阅读新页面的标题

不工作测试：

$(".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();
  });

Answer 1

更新：使用jQuery Mobile

Stackoverflow代码段无法运行，因此请参阅Native Messaging

HTML

/* CSS to prevent weird blue border in Chrome after setting focus */ 
h2:focus { outline: 0; }

CSS

(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();
  });

})();

JS

  //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();
  });

从事件（https://jsfiddle.net/EricOP/wo40z1m9/3/），承诺或回调中触发比使用定时等待更好，这样可以避免不必猜测渲染显示更改需要多长时间。

Sano 特别提到https://api.jquerymobile.com/pagecontainer/#event-change是有帮助的。

export default

JQuery Mobile强制VoiceOver专注于GotoPage之后的标题

1 个答案: