使用 javascript 聚焦字段时显示 Android 软键盘

Posted 2023-04-18

【中文标题】使用 javascript 聚焦字段时显示 Android 软键盘

【英文标题】：Showing Android's soft keyboard when a field is .focus()'d using javascript

【发布时间】：2011-08-26 14:20:48

【问题描述】：

在网页中，我有一个搜索字段。我添加了一个“清除”按钮，以便用户可以清除搜索字段并重新开始。为方便起见，我将焦点放在搜索字段的文本框上，光标确实出现在框中。然而，软键盘似乎没有出现在使用默认浏览器的 android 设备上。在 ios 和 Opera Mobile 中，它可以正常工作。

我是否可以调用其他方法使键盘显示在 Android 浏览器上，以便用户立即开始输入？

function clear_search() 
    if($('#searchinput').val()) 
        $('#searchinput').val('');
    
    $('#searchinput').focus();

【参考方案1】：

这个问题类似于 How to focus an input field on Android browser through javascript or jquery

无论如何，由于您已经有一个点击事件可以使用，这应该可以解决您的问题：

$(document).ready(function() 
    $('#field').click(function(e) $(this).focus(); );

    $('#button').click(function(e) 
        $('#field').trigger('click');
    );
)     

当然，您确实需要触发此事件的点击事件。只是在没有事件的情况下集中注意力似乎不起作用。以上适用于我在 android 4 上的标准浏览器并显示软键盘。

【讨论】：

请注意，这似乎不适用于按键事件（这很奇怪，因为我希望在使用 tab 或 enter 键聚焦到新文本字段时，键盘会显示，因为我专注于文本字段...）

这也适用于 touchstart + touchend 事件。非常漂亮，因为您可以在 touchstart 上添加一个元素并在 touchend 上触发焦点。只要记住使用 event.stopPropagation();和 event.preventDefault();否则有时键盘会开始显示然后再次隐藏（取决于触发事件的元素下方的内容）。

【参考方案2】：

click() 本身不够。你需要focus() 然后click()。如果您的脚本是由包含元素上的 onclick() 触发的，请注意无限循环。下面的脚本适用于我的 Chrome for android 58 和 Safari mobile 602.1。

var target = document.getElementsByTagName("input")[0];

if (event.target != target) 
    target.focus();
    target.click();

【参考方案3】：

我不是 100% 确定，但我认为它不能通过 javascript 完成（至少在 android 2.2 之前）。如果你使用 phonegap，你可以在这里使用：https://github.com/phonegap/phonegap/wiki/How-to-show-and-hide-soft-keyboard-in-Android

【讨论】：

如果您使用最新的 Chrome，即使在 android 2.2 @user1207504 的解决方案上也有效。