在 jquery mobile 中 changePage 后在 Safari 中显示 iOS 键盘

Question

我知道在 iOS safari 上没有 onclick 的情况下，用常规的 focus() 显示键盘几乎是不可能的，但我正在尝试做一些不同的事情。使用 jquery mobile 我在 DOM 中加载了两个不同的页面 (data-role="page")。这两个页面上都有文本输入。当用户点击第一页上的输入时，我想向上滑动第二页并专注于第二页上的输入并显示键盘。我可以通过在第一个输入上创建焦点事件侦听器并使用常规 $('#secondpage').show() 后跟 $('#secondinput').focus() 来完成此操作。但是，如果我使用 changePage() 而不是 show() 甚至在 .show() 上放置动画，则该字段将不会被聚焦并且键盘不会显示。

这是我在第一页的输入：

<input type="text" name="input1" id="input1" data-theme="A">

整个第二页：

<div data-role="page" id="page2">
<div>
    <form>
        <input type="text" id="input2" name="input2">
    </form>
</div>
</div>

这是我的 javascript 可以工作但没有提供我想要的转换，它包含在第一页的 pageinit 中。此外，为了让它工作，我必须在 #page2 上放置一个 display:none：

$('#input1').on('tap', function() {
    $('#page2').show();
    $('#input2').focus();
}); 

以下代码不起作用：

$('#input1').on('tap', function() {
    $('#page2').show("slide", { direction: "up" });
    $('#input2').focus();
}); 

这也不起作用（这将是最可取的解决方案）：

$('#input1').on('tap', function() {
    $.mobile.changePage('#page2', { transition: 'slideup' });
    $('#input2').focus();
}); 

我尝试过的另一件事是在#input1 上放置一个 onclick 属性，但无论我做什么，任何转换似乎都会杀死焦点和键盘。有什么建议吗？

Answer 1

试试下面的代码，你应该只在page2完成加载后才关注input2。

$(document).bind('pageinit', function() {
    $('#input1').on('tap', function() {
        $.mobile.changePage('#page2', { transition: 'slideup' });

    }); 
    $("#page2").bind('pageshow', function() {
        $('#input2').focus();
    });
});

DEMO