首页 新闻 搜索 专区 学院

一个关于浏览器兼容的问题

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 各种搜索都用了,代码都重写了好几次了,除了发现一个类似的错误以外没有任何收获。

知道的大牛们  给我说说吧

动感超人z的主页 动感超人z | 初学一级 | 园豆:1
提问于:2013-04-01 17:12
< >
分享
最佳答案
0

已测 火狐 木哟问题

收获园豆:10
zhibudao | 小虾三级 |园豆:525 | 2013-04-02 12:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册