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

旧城冷巷雨未停 提交于 2019-12-23 22:15:24

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!