在jquery mobile中输入焦点，但键盘没有出现

Posted 2023-03-07

【中文标题】在jquery mobile中输入焦点，但键盘没有出现

【英文标题】：input focus in jquery mobile, but keyboard doesn't appear

【发布时间】：2011-10-29 03:29:57

【问题描述】：

我正在使用 jquery、jquery mobile 和 phonegap。 我想用 input type="text" 显示这个页面的键盘。

    <section id="page1" data-role="page">
        <header data-role="header">
            <h1>jQuery Mobile</h1>
        </header>
        <div data-role="content" class="content">

            <input type="text" placeholder="입력하세요" />
        </div>

    </section>

我的脚本是

        $(document).ready(function()
            $('input').select();
            $('input').focus();
        );

文本字段被聚焦但键盘不显示，当点击输入类型=“文本”时启动。如何强制在 javascript 中或使用 phonegap 插件启动键盘？

【问题讨论】：

如果有人仍然好奇如何在 android 上执行此操作：***.com/questions/9060658/…

【参考方案1】：

以前的解决方案都不适合我。但是，我注意到 $('textarea').focus().select();在我第二次访问该页面后工作。因此，我强制 jquery mobile 对我的评论框页面进行数据预取。

这是我的通用 JQM 初始化代码（如果没有“数据预取”，它将无法工作）：

$('#comment-box-page').live('pageshow', function () 
   $('textarea').focus().select();
);

在列表页面上有一个小文本框的假图像，它重定向到comment-box.html，它只是一个带有发布和取消按钮的大测试区域。

        <div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <div data-role="fieldcontain">
            <a href="comment-box.html" data-prefetch><img src="fake-textfield.jpg"/>
            </a>
        </div>
    </div>

数据预取是与众不同的。当您点击该链接时，该页面的行为将与您第二次访问时一样，启用焦点并调出键盘。

【讨论】：

有什么方法可以在 jsfiddle 等上粘贴一个工作示例，或者至少在这里粘贴一个完整的基本示例，我可以看到它是如何工作的 - 我不太明白你的示例工作。

【参考方案2】：

你不能。如果您聚焦输入元素，移动浏览器不会显示键盘。用户必须点击输入元素。

【讨论】：

将焦点放在需要文本输入的输入字段上并且无法将文本输入输入到控件中会有什么意义？

【参考方案3】：

你必须使用“点击”事件来打开键盘：

$(document).live('click', function() 
    $("#input-element-id").focus();
);

【参考方案4】：

我在cordova 6 中使用它来支持android 移动应用程序及其工作：

-安装cordova插件键盘：cordova插件添加cordova-plugin-keyboard

-然后你可以使用 Keyboard.show() 显示键盘和 keyboard.hide() 隐藏它

你可以这样做来显示键盘：

  $("#your_text_input").click(function () 
                $(this).focus();
                Keyboard.show();
  );

  $('#your_text_input').keydown(function(e) 
  if (e.which == 13)  //Enter keycode
    //your action
    ...

    // Now clear input and set focus back to input
    Keyboard.hide();
    $(this).val('').trigger("keyup").focus();
  
  );

【参考方案5】：

$("input").bind( "blur", function () 
       $(".ui-header-fixed" ).css("top","0 !important");
);