场景: HTML页面中有一个input元素,您可以在其中输入任何数字/文本。如果输入了两个连续的字符,那么我正在调用showModalDialog()方法来打开一个弹出窗口,该窗口具有另一个输入元素。无论在父页面中输入的字符是什么,都将被复制到该搜索框中。
问题:如果用户快速(不间断地)键入文本以搜索超过2个字符(例如 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>
最佳答案
您实际上想要做的是延迟弹出窗口的打开,直到您的用户停止键入为止。检测用户是否已停止键入仅仅是检测在可能发生击键的时间内是否未发生任何事情。因此,与其打开模态窗口,不如不打开模态窗口,而是在没有键击的情况下延迟打开它。
这是我编写的一些代码,可以为您提供帮助。我将延迟设置为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>
关于javascript - 模态对话框(showModalDialog())在IE9中无法正常运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14108802/