如何在Phonegap应用程序的jQueryMobile页面中隐藏键盘?

我在iPhone模拟器中隐藏键盘有问题。 我的HTML代码:

jQuery代码:

 $("#my_form").submit(function() { one = $('#searchBar').val(); console.log(one); doSearch(one); return false; }); 

一切都按我需要的方式工作:我可以获得表单值并执行一些Ajax。 但是当函数返回false时,iPhone模拟器中的虚拟键盘仍然可见。 如何隐藏键盘? 有没有其他方法可以做到这一点? 当用户搜索并按下iPhone上的“Go”时,我需要使用Ajax将数据传递到服务器。 搜索结果应显示在同一页面中(已完成)。 用户可以再次在同一页面中搜索。

请帮我。

谢谢,

–regeint

而不是将焦点切换到另一个元素,你可以简单地模糊输入,如下所示:

 $('#searchBar').blur(); 

它将隐藏虚拟键盘。

从这里

这是非常不言自明的。 第二行将解除所有输入字段的焦点,它依赖于jQuery。 我发现在单个聚焦文本字段上调用blur()并不总是有效。 这些行中的任何一行都应该独立工作,但它们都不能一起停止!

 var hideKeyboard = function() { document.activeElement.blur(); $("input").blur(); }; 

在jQuery中,如果你return false; ,它将停止默认的浏览器行为,在这种情况下,提交表单以及关闭键盘。 以下应该有效:

 

jQuery的:

 $("#my_form").submit(function(){ one = $('#searchBar').val(); console.log(one); doSearch(one); $('#focusable').focus(); return false; }); 

尝试将另一个可聚焦元素(例如: )添加到页面(将其高度设置为0以使其不可见但可聚焦),并在返回false之前将焦点移至该元素。

谢谢Hosh Sadiq和techfoobar帮助我。 实际上我做了以下工作。 它不影响此元素上方或下方的css。

 $('.clr').after(''); $('#focusable').focus(); 

再次感谢。 🙂

我使用regeint解决方案,但修改了一下它不起作用,因为我告诉phonegap允许在Cordova.plist中显示键盘而无需用户交互我将KeyboardDisplayRequiresUserAction设置为NO

 function hideTheKeyBoard() { $($.mobile.pageContainer).after(''); $('#focusable').focus();// maybe .blur() would work too. $('#focusable').remove(); } 

如果你不介意失去焦点, .blur()方法可能是最有效的方法。 但是,例如,如果您需要它以保持选项列表打开,就像在预先输入中一样。

你能看到我发现解决这个问题的方法。

 $('#keepMeFocused').click(function() { $(this).attr('type', 'text'); $('#hideKeyboard').removeAttr('disabled'); $('#msg').show(); }); $('#hideKeyboard').click(function() { $('#keepMeFocused').attr('type', 'button').focus(); $('#hideKeyboard').attr('disabled', true); }); 
 #keepMeFocused { box-sizing: border-box; width: 200px; height: 24px; background: none; border: solid 1px #ccc; padding: 0 4px; text-align: left; } #hideKeyboard { height: 24px; background: #666; border: solid 1px #666; border-radius: 2px; color: #fff; vertical-align: top; } #hideKeyboard[disabled] { background: #ddd; border-color: #ddd; } #keepMeFocused:not(:focus) ~ #msg { display: none; } 
    

Keep me visible while input has focus