一个关于浏览器兼容的问题
0
悬赏园豆：10
[已解决问题]
解决于 2013-04-11 09:29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var dat = [{ value: '-1', text: '请选择' }, { value: '0', text: '选项一' }, { value: '1', text: '选项二' }, { value: '2', text: '选项三' }, { value: '4', text: '选项四'}]; var Li_Count = 0; var li_index = 0; //根据id获得元素 function GetById(id) { return document.getElementById(id); } //根据id获得选项 function GetItem(id, q) { return document.getElementById(id + '_hehe').getElementsByTagName('li').item(q); } //突出显示元素 function Tucu(a) { a.setAttribute('class', 'tuchu'); } //重置元素 function Chongzhi(a) { a.setAttribute('class', 'chongzhi'); } //重置所有选项 function Chongzhisuoyou(id) { var lis = document.getElementById(id + '_hehe').getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis.item(i).setAttribute('class', 'chongzhi'); } } //显示下拉框 function Showli(id) { var style = document.getElementById(id + '_hehe').getAttribute('style'); document.getElementById(id + '_hehe').setAttribute('style', style + 'display:block;z-index:100;'); } function DwonZ_index(id) { var style = document.getElementById(id + '_hehe').getAttribute('style'); document.getElementById(id + '_hehe').setAttribute('style', style + 'z-index:1;'); } //隐藏下拉框 function Displayli(id) { var style = document.getElementById(id + '_hehe').getAttribute('style'); document.getElementById(id + '_hehe').setAttribute('style', style + 'display:none;'); Clearli(id); li_index = 0; Li_Count = 0; } //图片选中效果 function bian(a, b, c) { if (a == 0) { b.setAttribute("src", "Img.jpg"); } else { b.setAttribute("src", "Img1.jpg"); } } //给文本框赋值 function FullInputText(id, a) { GetById(id + '_inputtext').value = a; } //给Text和Value赋值 function FullTextAndValue(id, texts, values) { document.getElementById(id + '_realvalue').value = values; document.getElementById(id + '_realtext').value = texts; } //填充数据到下拉框 function FullDataToList(id, list) { document.getElementById(id + '_hehe').innerHTML = list; } //聚焦选项 function jujiao(id, a) { Tucu(a); FullInputText(id, a.innerHTML); } //选中选项 function xuanzhong(id, a) { if (a == null) { return; } FullInputText(id, a.innerHTML); FullTextAndValue(id, a.innerHTML, a.getAttribute('data')); Displayli(id); } //清除选项 function Clearli(id) { FullDataToList(id, ''); } //按下事件 function fuck(id) { if (window.event) { var key = window.event.keyCode; } else { var key = event.which; } if (key == 38) { li_index--; } else if (key == 40) { li_index++; } else { return; } if (li_index > Li_Count - 1) { li_index = Li_Count - 1; } if (li_index < 0) { li_index = 0; } aa = true; setTimeout('timer("' + id + '")', 10); } //选择延迟效果 function timer(id, in_index) { var a = document.getElementById(id + '_hehe').getElementsByTagName('li').item(li_index); Chongzhisuoyou(id); Tucu(a); FullInputText(id, a.innerHTML); aa = false; } //操作数据 function OperateData(s, data) { var list = ''; var count = 0; for (var i = 0; i < data.length; i++) { if (count > 10) { return; } if (data[i].text.search(s) >= 0) { list += "<li style='font-size:12px;border: 1px dotted #FFFFFF; 'data= " + data[i].value + "onmouseover= 'Tucu(this)' onmouseout='Chongzhi(this)' onclick='xuanzhong(this)'>" + data[i].text + "</li>"; count++; } Li_Count = count; } return list; } //根据id得到数据 function GetDataById(a) { return dat; } //得到前十条数据 function GetTop10(id) { var list = ''; var num = 0; var data = GetDataById(id); if (data.length < 10) { num = data.length; } else { num = 10; } for (var i = 0; i < num; i++) { list += "<li style='font-size:12px;border: 1px dotted #FFFFFF; 'data= " + data[i].value + " onmouseover= 'Tucu(this)' onmouseout='Chongzhi(this)' onclick='xuanzhong( \"" + id + "\",this)'>" + data[i].text + "</li>"; } Li_Count = num; return list; } //显示前10条 function ShowTop10(id) { document.getElementById(id + '_inputtext').focus(); FullDataToList(id, GetTop10(id)); Showli(id); Tucu(GetItem(id, 0)); } //显示数据 function show(id) { if (window.event) { var key = window.event.keyCode; } else { var key = event.which; } if (key == 8 && GetById(id + '_inputtext').value == '') { ShowTop10(id); return; } //Enter if (key == 13) { if (li_index == -1) { return; } else { xuanzhong(id, GetItem(id, li_index)); return; } } if (key == 38 || key == 40) { return; } var list = OperateData(GetById(id + '_inputtext').value, GetDataById(id)); if (GetById(id + '_inputtext').value == '') { Displayli(id); } else if (list != '') { FullDataToList(id, list); Showli(id); var a = GetItem(id, li_index); Tucu(a); } } </script> <style type="text/css"> .chongzhi { background-color: White; color: Black; } .tuchu { border: 1px dotted #000000; background-color: #3D93E8; color: White; } li { text-align: left; list-style: none; margin-left: -40px; } ul { background-color: White; } </style> </head> <body> <div id="InputDropDownList1" style="padding: 0px;"> <input type='hidden' id='InputDropDownList1_realtext' name='InputDropDownList1text' value='' /> <input type='hidden' id='InputDropDownList1_realvalue' name='InputDropDownList1value' value='' /> <input type='text' id='InputDropDownList1_inputtext' onclick='ShowTop10("InputDropDownList1")' style='height: 13px; width: 150px; float:left;font-size: 12px;' onkeydown='fuck("InputDropDownList1")' onkeyup='show("InputDropDownList1")' value='' /> <img src='Img.jpg' style='float:left; margin-left:-18px; margin-top:2px; ' onmousemove='bian(1,this)' onmouseout='bian(0,this)' onclick='ShowTop10("InputDropDownList1")' /> <ul id='InputDropDownList1_hehe' style='clear:left; margin-top:18px; position: absolute; width: 110px; margin-left: 0px; display: none; border: thin groove #C0C0C0; '> </ul> </div> </body> </html>
这是一个可输入的下拉框，可以通过使input获得焦点显示下拉框，并且会自动匹配数据
为了使问题更加突出，我删除了很多东西，只剩一个html+script+css了，现在的情况是 我在谷歌和ie9 ie10 浏览器上测试正常，在火狐上面由于没有获取到updwon的键值所以功能没有实现，不过这个好解决。
关键是ie8以及以下版本，ie8的情况是点一下不好使，多点几下就出来了，并且下拉框的样式还发生变化。ie7和ie6就是死活下拉框就不出来（这两个浏览器可以不考虑）
有没有人知道这是为什么呢，整的我都郁闷了，google bing baidu duck 各种搜索都用了，代码都重写了好几次了，除了发现一个类似的错误以外没有任何收获。
知道的大牛们 给我说说吧
最佳答案
0
已测 火狐 木哟问题
收获园豆：10
