模态对话框（showModalDialog（））在IE9中无法正常运行

Question

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

问题：如果用户快速键入文本（不间断）以搜索超过2个字符（例如苹果），则输入第3和/或第4个字符（不会被keyUp事件跟踪）。 我的意思是只有一个单词被复制到弹出窗口中的搜索框中。 因此用户需要重新键入文本。

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

环境：仅在IE9中重现

语言： HTML，Javascript

注意：我所分析的是，由于触发弹出窗口有延迟，因此错过了2个字符后输入的字符。 我不知道为什么只在IE9中出现这种情况我也无法升级到IE10来解决问题。

我仍然坚持这个问题。 有没有替代解决方案呢？ 用其他方法获得模态对话的所有功能的任何其他方法？

以下是父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>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>

Answer 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>

模态对话框（showModalDialog（））在IE9中无法正常运行

问题描述

1 个解决方案

解决方案1
1 2013-01-07 21:07:16

模态对话框（showModalDialog（））在IE9中无法正常运行

问题描述

1 个解决方案

解决方案1 1 2013-01-07 21:07:16

解决方案1
1 2013-01-07 21:07:16