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

Posted

技术标签:

【中文标题】使用 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 的解决方案上也有效。

以上是关于使用 javascript 聚焦字段时显示 Android 软键盘的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Typeahead.js:单击/聚焦时显示所有选项

如何通过 Javascript / jQuery 在按钮单击时显示引导警报?

选中复选框时显示隐藏字段?

在点击文本字段时显示日期选择器

防止键盘在活动开始时显示

在 HTML 输入字段中选择文件时显示确认