Geek Answers Handbook

Modal dialog (showModalDialog ()) does not work properly in IE9

Scenario: The HTML page has an input element in which you can enter any numbers / text. If 2 consecutive characters are entered, I call the showModalDialog () method to open a popup that has another input element. No matter what characters entered on the parent page will be copied to this search box.

Problem: If the user types quickly (without interruptions) to search with more than two characters (for example, an apple ), then the third and / or 4th character / (are not tracked by the keyUp event). I mean that only the word aple is copied into the search field present in the popup. Thus, the user needs to re-enter the text.

Necessary solution: Whenever the user enters any text, the pop-up should be launched and all the characters should be copied into the search field when pop-up

Environment: Playback only in IE9

Languages: HTML, Javascript

Note. What I analyzed, since there is a delay when the pop-up window starts , the characters entered after 2 characters are skipped. I don’t know why this only happens in IE9 , also I can’t switch to IE10 to solve the problem.

However, I became interested in this problem. Is there an alternative solution to this? Any other way to get all the functionality of a modal dialog with some other / s elements?

Here is an example HTML source code snippet:

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

Here is the HTML popup (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
source share
1 answer

What you really want to do is to delay opening a popup until your user stops typing. Detecting if the user has stopped typing is simply a matter of detection if nothing happened in the time that a key press could occur. Therefore, instead of opening a modal window, open it only after a delay, provided that there were no keystrokes during this time.

Here is the code I prepared that should help you. I set the delay to 500 ms.

 <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>
+1
source

More articles:


All Articles