5

シナリオ : HTML ページに任意の数字/テキストを入力できる入力要素があります。2 つの連続した文字が入力された場合、showModalDialog() メソッドを呼び出して、別の入力要素を持つポップアップ ウィンドウを開きます。親ページに入力された文字はすべて、その検索ボックスにコピーされます。

問題 :ユーザーが 3 文字以上 (例: apple )で検索するためにテキストをすばやく (中断せずに)入力すると、入力した 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>
4

1 に答える 1

1

実際にやりたいことは、ユーザーが入力をやめるまでポップアップを開くのを遅らせることです。ユーザーがタイピングを停止したかどうかを検出することは、キーストロークが発生した可能性がある間に何も起こらなかったかどうかを検出することです。そのため、モーダル ウィンドウを開く代わりに、その間にキーストロークが発生しないという条件で、少し時間を置いてから開きます。

ここに、私が作成したいくつかのコードを示します。遅延を 500ms に設定しました。

<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>
于 2013-01-07T21:07:16.597 に答える