Android WebView中HTML文本框blur事件失效问题求助

Hey there! I’ve run into this exact problem before when working with WebViews and unmodifiable third-party content—super frustrating, but there are solid workarounds since you can’t tweak the site’s code directly. Let’s break down the solutions:

Approach 1: Trigger Blur via WebView Focus Changes #

Android’s WebView exposes focus change listeners that we can leverage. When the WebView itself loses focus (like when the user taps outside or switches apps), we can inject JavaScript to force the input field to fire its blur event.

Here’s how to implement this in Kotlin:

webView.setOnFocusChangeListener { _, hasFocus ->
    if (!hasFocus) {
        // Replace "#suggestion-input" with the actual selector for your input field
        // Use Chrome's remote debugging (chrome://inspect) to find the right selector
        webView.evaluateJavascript(
            "document.querySelector('#suggestion-input').blur();",
            null
        )
    }
}

Pro tip: If you’re not sure the input’s exact selector, use document.activeElement.blur() instead—it targets whatever element is currently focused, so you don’t have to hardcode a selector.

Approach 2: Listen for Keyboard Visibility Changes #

Since the issue pops up when the keyboard is active, we can detect when the keyboard hides and trigger the blur event then. This works because the keyboard hiding usually means the user is done interacting with the input.

Add this to your Activity/Fragment:

val rootView = window.decorView.rootView
rootView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        val rect = Rect()
        rootView.getWindowVisibleDisplayFrame(rect)
        val screenHeight = rootView.height
        val keyboardHeight = screenHeight - rect.bottom

        if (keyboardHeight == 0) {
            // Keyboard is hidden—trigger blur on the focused input
            webView.evaluateJavascript(
                "document.activeElement.blur();",
                null
            )
        }
    }
})

// Don't forget to remove the listener in onDestroy to avoid memory leaks
override fun onDestroy() {
    super.onDestroy()
    window.decorView.rootView.viewTreeObserver.removeOnGlobalLayoutListener(this)
}

Approach 3: Intercept Touch Events Outside the Input #

If the user taps anywhere else in the WebView besides the input field, we can force the input to lose focus. This mimics the default browser behavior where clicking outside an input triggers blur.

Implement a touch listener for your WebView:

webView.setOnTouchListener { _, event ->
    if (event.action == MotionEvent.ACTION_UP) {
        val hitTestResult = webView.hitTestResult
        // Check if the tapped area isn't an input field
        if (hitTestResult.type != HitTestResult.EDIT_TEXT_TYPE) {
            webView.evaluateJavascript(
                "document.activeElement.blur();",
                null
            )
        }
    }
    false // Let the WebView handle the rest of the touch logic
}

Key Notes #

• Remote Debugging is Your Friend: Use Chrome’s chrome://inspect tool to connect to your WebView and inspect the input field’s attributes—this is how you’ll get the correct selector if you don’t use document.activeElement.
• Test Edge Cases: Make sure to test scenarios like rotating the screen, switching apps, or using hardware keyboards to ensure the blur event triggers consistently.

内容的提问来源于stack exchange，提问作者Udara Seneviratne