模式对话框(showModalDialog())在IE9中不能正常工作
Modal dialog (showModalDialog()) is not functioning properly in IE9
场景: 在HTML页面中有一个输入元素,您可以在其中输入任何数字/文本。如果输入了2个连续的字符,那么我调用showModalDialog()方法打开一个弹出窗口,其中有另一个输入元素。在父页面中输入的任何字符都将被复制到该搜索框中。
问题: 如果用户键入文本快速(没有中断)搜索超过2个字符(例如apple),那么键入的第3和/或第4个字符/s将被遗漏(不被keyUp事件跟踪)。我的意思是只有苹果字被复制到弹出的搜索框中。所以用户需要重新输入文本。
需要的解决方案: 每当用户键入任何文本时,需要触发弹出,所有字符需要复制到弹出
的搜索框中环境: 繁殖只有在 IE9
语言: HTML、Javascript
注意:我分析的是,由于触发弹出窗口存在延迟,因此在2个字符之后键入的字符会被遗漏。我不知道为什么只在IE9中出现,我也无法升级到IE10来解决问题。
我仍然对这个问题耿耿于怀。有其他解决办法吗?任何其他的方式来获得所有的模态对话框的功能与一些其他元素/s?下面是父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:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作