Android WebView - 使用Javascript设置HTML字段焦点

16
我有一个应用程序,其中只有一个可见的 WebView 组件,用于显示一些动态生成的HTML(也可以运行JavaScript)。它已启用为 WebView 。
对于一些页面,我正在尝试在页面加载完成后通过JS调用而不是通过Body onLoad()来设置输入文本框之一的焦点,即在 onPageFinished()中。大部分javascript都可以正常执行。
    webview.loadURL("javascript:JSMethod();");

但是,当我使用同样的调用来做一个document.getElementById('text1').focus()时,光标确实到达了元素,但是软键盘不会弹出。当从页面上的按钮执行相同的javascript代码时,确实会产生所期望的效果。
我附上了源代码,其中有3个按钮
  1. 焦点放在Text1上 - 将光标置于text1上,并弹出软键盘。
  2. Java焦点放在Text1上 - 调用Java执行相同的JS。只显示光标,不打开键盘。
  3. Java焦点放在Text1并强制打开键盘 - 从Java调用JS并强制打开键盘。
我的理解是:无论是通过浏览器使用按钮/事件执行,还是通过WebView.loadURL()从Java发送的方式执行,JS执行都应该是相同的。
以下是我的疑问
  1. 我在使用Button#2时是否遗漏了什么?目前我的代码就是这样,我只看到光标被设置,但软键盘不会打开。
  2. 当我像Button#3中写的那样使用逻辑时,有时看不到字段上的光标,但会得到期望的效果,并在弹出的键盘中输入时才会出现光标。
  3. Button#2中我看到的行为可能是Android JS执行中的一个bug吗?或者可能是WebView没有焦点,因此只显示光标?我也尝试了webview.requestFocus() - 我不能写requestFocusOnTouch(),因为这是我唯一的View,我期望它自动获得焦点。
演示该行为的Java代码如下:
    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.inputmethod.InputMethodManager;
    import android.webkit.JsResult;
    import android.webkit.WebChromeClient;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;

    public class WebViewProjectTestJSHTMLFocusActivity extends Activity {

        Activity _current = null;
        WebView wv = null;

        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            _current = this;
            //setContentView(R.layout.main);
            String data = "<html><body>" +
                                "<script>function focusser() { document.getElementById(\"text1\").focus(); } </script>" +
                                "<script>function javaFocusser() { javautil.javaFocus(false); } </script>" +
                                "<script>function javaFocusserKeyboard() { javautil.javaFocus(true); } </script>" +
                                "Text 1<input type='text' id='text1'/><br/>" +
                                "Text 2<input type='text' id='text2'/><br/>" +
                                "<input type='button' value='Focus Text1' onClick='focusser()'/>" +
                                "<input type='button' value='Java Focus Text1' onClick='javaFocusser()'/>" +
                                "<input type='button' value='Java Focus Text1 And Keyboard Open' onClick='javaFocusserKeyboard()'/>" +
                            "</body></html>";
            wv = new WebView(this);
            wv.getSettings().setJavaScriptEnabled(true);

            // Set some HTML 
            wv.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);

            // Call back required after page load finished
            wv.setWebViewClient(new CustomWebViewClient());

            // Enable Alert calls  
            wv.setWebChromeClient(new CustomWebChromeClient());

            // For JS->Java calls
            wv.addJavascriptInterface(this, "javautil");

            setContentView(wv);
        }


        /**
         * Calls the same javascript and forces the keyboard to open 
         */
        public void javaFocus(final boolean shouldForceOpenKeyboard) {

            Thread t = new Thread("Java focusser thread") {
                public void run() {
                    wv.loadUrl("javascript:focusser();");
                    if(shouldForceOpenKeyboard) {
                        InputMethodManager mgr = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                        mgr.showSoftInput(wv, InputMethodManager.SHOW_IMPLICIT);
                    }
                }
            };

            // Run on the View Thread.
            _current.runOnUiThread(t);
        }

        /**
         * Calls focus method after the page load is complete.
         */
        final class CustomWebViewClient
        extends WebViewClient {
            @Override
            public void onPageFinished(WebView view, String url) {
                // javaFocus(true);
                Log.d("TestExamples", "focusser call complete");
            }
        }

        final class CustomWebChromeClient
        extends WebChromeClient {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Log.d("TestExamples", "JS Alert :: " + message);
                return false;
            }
        }
    }

解决方案更新 2011年6月24日 为了使其正常工作,您需要在实际的JS焦点调用之前使用wv.requestFocus(View.FOCUS_DOWN)。我修改了上面的javaFocus()方法,正确的版本如下。早些时候当我提到我在onCreate()方法中初始化WebView时,我使用了requestFocus()。主要的区别现在是我们每次都在Javascript document.getElementById("text1").focus();执行之前强制让WebView获得焦点。

public void javaFocus(final boolean shouldForceOpenKeyboard) {
    Thread t = new Thread("Java focusser thread") {
        public void run() {
            wv.requestFocus(View.FOCUS_DOWN);
            wv.loadUrl("javascript:focusser();");
            if(shouldForceOpenKeyboard) {
                InputMethodManager mgr = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                mgr.showSoftInput(wv, InputMethodManager.SHOW_IMPLICIT);
            }
        }
    };

    // Run on the View Thread.
    _current.runOnUiThread(t);
}

同时,为了确保这个问题不是由于通过触摸等方式引发的焦点而被修复的,我使用一个后台线程在WebView显示5秒后启动javaFocus()函数。修改后的onCreate()如下所示。

..... More onCreate code before....
// Enable Alert calls  
wv.setWebChromeClient(new CustomWebChromeClient());

// For JS->Java calls
wv.addJavascriptInterface(this, "javautil");

setContentView(wv);

new Thread("After sometime Focus") {
    public void run() {
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        javaFocus(true);
    }
}.start();
.... onCreate() ends after this.... 

感谢您的详细解释。我也遇到了同样的问题,但是这个解决方案在Android 3.2上对我无效。最终,我不得不编写一个函数来模拟实际的字段点击。我不知道为什么您的解决方案不起作用。WebView充满了怪癖。 - Pre101
我没有在Android 3.x/4.x中测试过这段代码。但是你尝试在其中任何一个版本上运行这个示例程序了吗? - Swaroop
我很想知道您是否可以使用这种方法来确保type=number的输入实际上获得数字键盘。据我所知,InputMethodManager只能打开标准键盘布局(Qwerty),因为它不知道当前有焦点的HTML元素是哪个。使用wv.requestFocus也没有帮助。 - Wytze
2个回答

10

可能是Webview没有应用程序焦点。尝试执行以下操作:

wv.requestFocus(View.FOCUS_DOWN);

2
这确实起作用了。诀窍是在请求焦点之前使用 wv.requestFocus(View.FOCUS_DOWN);。修改问题,使代码格式良好。 - Swaroop
有人知道 wv.requestFocus(View.FOCUS_DOWN) 在 iOS 上是否有效吗?谢谢。 - star

1
这里是完整的解决方案。
protected void onCreate(Bundle savedInstanceState) {

    // setfocus on page load finished
    myWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(myWebView, url);
            myWebView.requestFocus(View.FOCUS_DOWN);
            Toast.makeText(getApplicationContext(), "Done!", Toast.LENGTH_SHORT).show();
        }
    });
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接