Windows Phone: Missing blur event in IE or Edge when back button pressed

问题

The following scenarios are relevant to Windows Phone devices (IE or Edge).

Scenario 1:

If an input element has the focus and the soft keyboard is up, pressing the hardware back key blurs the focused element and pops down the keyboard as it should. However, there is no corresponding blur event fired.

Scenario 2:

If an input element has the focus and the soft keyboard is up, tapping outside the input element blurs the focused element, pops down the keyboard and fires a blur event.

Question:

Is there a way to make the blur event fire when the hardware back key is pressed and an input element has the focus?

HTML to reproduce the issue:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>Blur Test</title>
    </head>
    <body>
        <p>Blur Test</p>
        <input type="text" onblur="alert('onblur');">
    </body>
</html>

Using addEventListener produces the same result.

Tested on a Nokia Lumia 620. OS version: 8.0.10211.204

Edit:

Tested on a Nokia Lumia 640. OS version: 8.10.15148.160 (Windows Phone 8.1 Update 2 - Internet Explorer 11)

Tested on a Nokia Lumia 635. OS version: 10.0.10586.29 (Windows 10 Mobile - Microsoft Edge 13)

回答1:

So, after further investigations I'm going to use the 'deactivate' event instead of the 'blur' event.

The 'deactivate' event looks like it's IE specific, at least I can't find any docs on it except for MSDN.

回答2:

Yes, when you press hardware back button the text box is still focused.

We can have a workaround for this.. You can fire the blur even on pressing hardware back button when text box is focused.

Soft Keyboard is up when you tap on textbox and that resizes the window. So you have to catch the screen resize event and that can be done every time when the soft keyboard is up or down i.e. The size of screen changes when soft keyboard is up or down.

You have to write a JavaScript code for this and that should be written under

$(document).ready function

$(window).resize(function () {
        var screenWidth = screen.width;
        var screenHeight = screen.height;
        var orientation = window.orientation;
        var switchCase = "portrait";

        if (orientation == 0 || orientation == 180) {
            switchCase = "portrait";
        } else if (orientation == 90 || orientation == -90) {
            switchCase = "landscape";
        }
        if (focusedSearchedBox) {
            if (switchCase == "portrait") {
                if ($(window).height() > (screenHeight * (2 / 5))) {
                    var searchBox = '#' + focusedSearchedBox.id;
                    $(searchBox).blur();
                   }                 
                } 
                else {
                if ($(window).height() > (screenWidth * (2 / 5))) {
                    var searchBox = '#' + focusedSearchedBox.id;
                    $(searchBox).blur();
                   }                
                }
        }

    });

and Focus event will be called every time the textbox is tapped and variable focusedSearchedBox is set on Focus event call.

It worked for me.

来源：https://stackoverflow.com/questions/16981817/windows-phone-missing-blur-event-in-ie-or-edge-when-back-button-pressed

标签

internet-explorer

windows-phone

microsoft-edge

windows-10-mobile