模式对话框 (showModalDialog()) 在 IE9 中无法正常运行答案

【问题标题】：Modal dialog (showModalDialog()) is not functioning properly in IE9模式对话框 (showModalDialog()) 在 IE9 中无法正常运行
【发布时间】：2013-01-01 07:44:58
【问题描述】：

场景： HTML 页面中有一个输入元素，您可以在其中输入任何数字/文本。如果输入了 2 个连续字符，那么我将调用 showModalDialog() 方法来打开一个弹出窗口，该窗口具有另一个输入元素。在父页面中输入的任何字符都将被复制到该搜索框。

问题：如果用户快速（不间断）输入文本以搜索超过 2 个字符（例如 apple），那么输入的第 3 和/或第 4 个字符被遗漏（不被 keyUp 事件跟踪）。我的意思是只有 aple 字被复制到弹出的搜索框中。所以用户需要重新输入文本。

需要的解决方案：每当用户输入任何文本时，都需要触发弹出窗口，并且需要将所有字符复制到弹出窗口的搜索框中

环境：仅在 IE9

中复制

语言： HTML、Javascript

注意：我分析的是，由于触发弹窗有延迟，2个字符后输入的字符会丢失出去。我不知道为什么会发生这种情况只在 IE9 我也无法升级到 IE10 来解决问题。

我仍然坚持这个问题。有没有其他解决方案？有没有其他方法可以使用其他元素获得模态对话框的所有功能？

这里是父 HTML 的示例代码 sn-p：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Page</title>
    <script type="text/javascript">
    var checkSeq = new RegExp("[a-zA-Z]{2}", "i");
     function handleShowModalPopUp(fieldValue){
        if(checkSeq.test(fieldValue)){
            window.showModalDialog("popUpPage.html", document.getElementById('searchElem').value, "");
        }
     }

    </script>

    </head>
    <body>
        Enter Search Term :  
        <input type="text" id="searchElem" value="" onkeyup="handleShowModalPopUp(this.value)">

    </body>
    </html>

这里是弹出窗口 HTML (popUpPage.html)：

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Search Dialog</title>
            <script type="text/javascript">
                function handleOnload(){
                    var searchVal = window.dialogArguments;
                    if(null!= searchVal){
                        document.getElementById('searchElem').value = searchVal;
                    }           
                }
            </script>
        </head>
        <body onload="handleOnload()">
            <input type="text" id="searchElem">
            <input type="button" value="Search">    
        </body>
        </html>

【问题讨论】：

不要使用需要整个页面的模式对话框（因此需要一个 HTTP 请求，因此会产生延迟）？为什么不直接使用 div 作为模态弹出窗口，例如 Bootstrap 或 jQuery UI 中可用的那些......或者自己编写。
谢谢。我需要阻止用户访问父页面，还需要阻止其上的所有事件（onBlur、onChange...）。所以我认为模态对话框是一个更好的选择。我们还有其他与模态对话框相同的选项吗？
如果没有showModalDialog()，您将无法获得真正的模态体验，但您很可能会继续遇到延迟，因为它会加载新页面，尤其是在存在网络延迟的情况下。 “假”模态对话框（如this one）不会阻止所有事件，但对于大多数用途来说已经足够了。而且由于您没有加载新页面，因此应该有零延迟。它只是页面上的另一个元素。
我仍然坚持这个问题。有没有其他解决方案？还有其他方法可以使用其他元素获得模态对话框的所有功能吗？

标签： javascript html internet-explorer internet-explorer-9 showmodaldialog

【解决方案1】：

您真正想要做的是延迟弹出窗口的打开，直到您的用户停止输入。检测用户是否停止打字只是检测在可能发生击键的时间内是否没有发生任何事情。因此，与其打开模态窗口，不如在没有击键的情况下延迟打开它。

这是我编写的一些代码，应该对您有所帮助。我已将延迟设置为 500 毫秒。

<html>
<head>
<script>
function DelayedPopup(delayThreshold) {
    this.delay = delayThreshold;
    this.lastSearchValue = undefined;
    this.popEvent = 0;
} 

DelayedPopup.prototype = { 
    needsDelay:  function() {
        return this.searchValue() != this.lastSearchValue;
    },

    searchValue: function() {
        return document.getElementById('searchElem').value;
    },

    openPopup: function() {
        window.showModalDialog("popUpPage.html", "");
    },

    popupOrDelay: function() {
        if (this.needsDelay()) {
            this.popup();
        }
        else {
            this.openPopup();
            this.popEvent = 0;
        } 
    },

    popup: function() {
        this.lastSearchValue = this.searchValue();          

        if (this.popEvent) {
            clearInterval(this.popEvent);
        } 

        var self = this;
        this.popEvent = setTimeout(function() { self.popupOrDelay(); }, this.delay);        
    }
};

var delayedPopup = new DelayedPopup(500);
</script>
</head>

<body>
<input type="text" id="searchElem" onkeyup="if (this.value.length > 2) delayedPopup.popup()">
</body>
</html>

【讨论】：

感谢您的帮助.. :) 我已经尝试过了，但是如果用户输入不一致，字符会再次丢失。我不明白为什么这个问题只出现在 IE9 上。
我有更简单的版本来在stackoverflow.com/questions/10067094/…中引入延迟
@Sanjeev 仔细观察，您会发现您建议的不是更简单的版本，而是完全相同的版本。我只是为了满足您的要求而编写了不同的代码。