IE, FF 에서 돌아가는 인텔리센스 - 자바스크립트

ETC 2010/07/19 15:38
test.html
<html>
    <head>
        <style>
            #output {position:absolute;visibility:hidden;border:1px solid black;width:400px;top:35px;z-index:99}
            #q {width:400px;}
            #test {font-size:72px;}
            #test selected {font-size:104px;}
            .td_a {background:white;}
            .td_b {background:#cecece;}
        </style>
        <title>인텔리-센스 기능 테스트</title>
        <script>
            //cross browsing.
            function open_div(e) {
                var result = "";
                
                if(typeof(e.which) != "undefined")
                    result = e.which;
                else
                    result = e.keyCode;

                if(result == 58) {
                    //공백으로 구분해서 맨 마지막 것.
                    arr = document.frm1.q.value.split(" ");
                    if(arr[arr.length-1] == "site")
                    {
                        //여기다가 불러올 내용도 좀 다르게 해서.
                        var obj = document.getElementById("output");
                        obj.style.visibility = "visible";
                    }

                    //occu, 등등
                }
            }

            function GetInnerString(obj)
            {
                if(typeof(obj.innerText) != "undefined") {
                    return obj.innerText;
                }
                else {
                    sText = obj.innerHTML;
                    sText = sText.replace(/(<br>)/ig," ");
                    sText = sText.replace(/(<[^>]+>)/g,"");

                    return sText;
                }
            }

            function move(e, o) {
                if(typeof(e.which) != "undefined")
                    result = e.which;
                else
                    result = e.keyCode;

                var obj = document.getElementById("output");
                var q_obj = document.getElementById("q");

                //up
                if(result == 38) {
                    if(obj.style.visibility == "visible") {
                        var flag = 1;
                        var sense_obj = document.getElementById("sense_bd");
                        var td_obj = sense_obj.getElementsByTagName("td");

                        for(i=0;i<td_obj.length;i++)
                        {
                            if(td_obj[i].className == "td_b") {
                                if(i != 0) {
                                    td_obj[i].className = "td_a";
                                    td_obj[i-1].className = "td_b";
                                    q_obj.value = GetInnerString(td_obj[i-1]);
                                    flag = 0;
                                    break;
                                }
                                else  {
                                    td_obj[0].className = "td_a";
                                    td_obj[td_obj.length-1].className = "td_b";
                                    q_obj.value = GetInnerString(td_obj[td_obj.length-1]);
                                    flag=0;
                                    break;
                                }
                            }
                        } //end for

                        if(flag) {
                            td_obj[td_obj.length-1].className = "td_b";
                            q_obj.value = GetInnerString(td_obj[i-1]);
                        }
                    }
                }

                //down
                if(result == 40) {
                    if(obj.style.visibility == "visible") {
                        var flag = 1;
                        var sense_obj = document.getElementById("sense_bd");
                        var td_obj = sense_obj.getElementsByTagName("td");

                        for(i=0;i<td_obj.length;i++)
                        {
                            if(td_obj[i].className == "td_b") {
                                if(i != td_obj.length-1) {
                                    td_obj[i].className = "td_a";
                                    td_obj[i+1].className = "td_b";
                                    q_obj.value = GetInnerString(td_obj[i+1]);
                                    flag = 0;
                                    break;
                                }
                                else {
                                    td_obj[i].className = "td_a";
                                    q_obj.value = GetInnerString(td_obj[i]);
                                    break;
                                }
                            }
                        }
                        if(flag) {
                            td_obj[0].className = "td_b";
                            q_obj.value = GetInnerString(td_obj[0]);
                        }
                    }
                }
            } //en function

            //cross browsing. click object
            function co(o)
            {
                if(typeof(o.innerText) != "undefined") {
                    document.frm1.q.value = o.innerText;
                }
                else {
                    sText = o.innerHTML;
                    sText = sText.replace(/(<br>)/ig," ");
                    sText = sText.replace(/(<[^>]+>)/g,"");

                    document.frm1.q.value = sText;
                }
                //마우스로 클릭 할 때 마지막 포커스는 항상 input 박스에 있어야 함.
                document.frm1.q.focus();
            }

            //modify class
            function mc(o)
            {
                //다른 객체에 td_b가 있는지 체크 후, 있으면 해제 후에
                var obj = document.getElementById("sense_bd");
                var td_obj = obj.getElementsByTagName("td");

                for(i=0;i<td_obj.length;i++)
                {
                    if(td_obj[i].className == "td_b") {
                        td_obj[i].className = "td_a";
                        break;
                    }
                }

                if(o.className == "td_a")
                    o.className = "td_b"
                else
                    o.className = "td_a"
            }

            //disable drag
            function dd()
            {
                if (typeof(event.preventDefault) != "undefined") {
                    event.preventDefault();
                }
                else {
                    return false;
                }
            }

            function close_intelisense()
            {
                //루프를 돌면서, td_b 로 되어 있는게 있다면, td_a 로 변경.
                //어차피 하나 밖에 없을테니, break 이용.
                var obj = document.getElementById("output");
                obj.style.display = "none";                
            }
        </script>
    </head>

    <body onload="document.frm1.q.focus();">
        <form name="frm1" method="post" onSubmit="return false;">
            <input type="text" id="q" name="q" onkeypress="open_div(event)" onkeydown="move(event,this)" AUTOCOMPLETE="off">&nbsp;&nbsp;<input type="button" value="검 색">
        </form>

        <div id="output" onkeydown="move(event, this)">
            <table id="sense_tb">
                <tbody id="sense_bd" onselectstart="return false;" ondragstart="return false" onmousedown="dd();">
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test1</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test2</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test3</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test4</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test5</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test6</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test7</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test8</b></td></tr>
                    <tr><td onclick="co(this)" onmouseover="mc(this)" onmouseout="mc(this)" class="td_a" width="400px"><b>test9</b></td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
태그 : ff,IE,intellisense,JavaScript,인텔리센스
의견 (0)