找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发JS模仿搜索引擎提示框（无后端数据）

2018-12-12 分类：JavaScript 阅读(784) 评论(0)
高粒度模块化的前端开发
汽车前端模块化开发
前端模块化开发的作用
功能点：
没有获得焦点时，提示‘请输入数据’
输入数据则弹出提示框
没有数据提示框自动收回
光标hover改变背景色（js实现，非:hover）
键盘上下键，移动背景色，并实现输入框数据更改
回车，输入框获取数据
当鼠标指向2时，上下键可以直接从2的点开始改变背景焦点
……

html 代码

<!DOCTYPE html>
    <head>
        <title></title>
        <meta charset=”utf-8″ />
        <style>
            .tip {
                color: gray;
            }
            li {
                padding: 0;
                margin: 0;
                list-style-type: none;
                background-color: white;
                width: 300px;
            }
            input {
                padding: 0;
                margin: 0;
                width: 300px;
                outline: none;
            }
            .ul {
                padding: 0;
                margin: 0;
                width: 300px;
                padding: 1px 1px;
                border: 1px solid #87ceeb;
                border-top: 0;
            }
        </style>
    </head>
    <body>
        <!–
            在开启输入法的情况下，三个浏览器的具体问题如下：
            IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
            Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
            Opera:keydown, keypress和keyup都不触发，输入值也未能获。
            IE 有一个 onpropertychange 事件处理器可以随时检测变化，对应之，Firefox 和 Opera 有一个 oninput 事件处理器也可以达到目的。
            遗憾的是，在输入法开启的情况下，Opera对于 oninput 也没法随时监听（表现在：输入英文字母可以监听到，而中文则失效）。
            如果不考虑 Opera, IE使用 onpropertychange 而 Firefox 使用 oninput, 也可解决我们上述问题。
            另外需要注意的是， oninput 比较诡异，您可以 来绑定，也可以用addEventListener来绑定，
            就是不能使用 DOM 0 的element.oninput = function(){} 的形式来绑定，否则不生效。
        –>
        <div>
            <p>下弹框</p>
            <input id=”test” class=”tip” type=”text” value=”请输入数据” />
            <ul></ul>
        </div>
        <script>
            var classOperate = {
                addClass: function(elem, name) {
                    if (elem.className == ”) {
                        elem.className = name
                    } else if (
                        elem.className.match(
                            new RegExp(‘(\\s|^)’ + name + ‘(\\s|$)’),
                        )
                    ) {
                        elem.className = elem.className
                    } else {
                        elem.className += ‘ ‘ + name
                    }
                },
                removeClass: function(elem, name) {
                    if (
                        elem.className.match(
                            new RegExp(‘(\\s|^)’ + name + ‘(\\s|$)’),
                        )
                    ) {
                        elem.className = elem.className.replace(
                            new RegExp(‘(\\s|^)’ + name + ‘(\\s|$)’),
                            ‘ ‘,
                        )
                    }
                },
            }
            var EventUtil = {
                //添加事件处理函数
                addHandler: function(element, type, handler) {
                    if (element.addEventListener) {
                        element.addEventListener(type, handler, false)
                    } else if (element.attachEvent) {
                        element.attachEvent(‘on’ + type, handler)
                    } else {
                        element[‘on’ + type] = handler
                    }
                },
                //删除事件处理函数
                removeHandler: function(element, type, handler) {
                    if (element.removeEventListener) {
                        element.removeEventListener(type, handler, false)
                    } else if (element.detachEvent) {
                        element.detachEvent(‘on’ + type, handler)
                    } else {
                        element[‘on’ + type] = null
                    }
                },
                //获取事件
                getEvent: function(event) {
                    return event ? event : window.event
                },
                //获取事件目标
                getTarget: function(event) {
                    return event.target || event.srcElement
                },
                //取消默认行为
                preventDefault: function(event) {
                    if (event.preventDefault) {
                        event.preventDefault()
                    } else {
                        event.returnValue = false
                    }
                },
                //取消冒泡
                stopPropagation: function(event) {
                    if (event.stopPropagation) {
                        event.stopPropagation()
                    } else {
                        event.cancelBubble = true
                    }
                },
            }
            //共用的输入框及提示栏
            var test = document.getElementById(‘test’)
            var ul = document.getElementsByTagName(‘ul’)[0]
            var lis = ul.getElementsByTagName(‘li’)
            var flag = -1 //判断键盘控制状态, -1表示未选择的初始状态
            var originalValue = ”
            //提示鼠标在li上 改变颜色
            function changeColor(evt) {
                var event = EventUtil.getEvent(evt)
                var target = EventUtil.getTarget(event)
                if (target.tagName.toLowerCase() == ‘li’) {
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].style.backgroundColor = ‘white’
                        if (lis[i] === target) {
                            target.style.backgroundColor = ‘#D1EEEE’
                            flag = i
                        }
                    }
                }
            }
            //鼠标离开时，改变颜色
            EventUtil.addHandler(ul, ‘mouseout’, function(evt) {
                var event = EventUtil.getEvent(evt)
                var target = EventUtil.getTarget(event)
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = ‘white’
                }
            })
            //获得焦点后更改默认样式
            EventUtil.addHandler(test, ‘focus’, function() {
                test.value = ”
                classOperate.removeClass(test, ‘tip’)
                test.style.border = ‘1px solid #87CEEB’
                test.style.padding = ‘1px 1px’
            })
            //失去焦点改变 边框颜色
            EventUtil.addHandler(test, ‘blur’, function() {
                if (test.value == ”) {
                    test.value = ‘请输入数据’
                    classOperate.addClass(test, ‘tip’)
                }
                test.style.border = ‘1px solid #b8b8b8’
            })
            //将选定值 赋予到输入框中
            EventUtil.addHandler(ul, ‘mouseup’, function(evt) {
                var event = EventUtil.getEvent(evt)
                var target = EventUtil.getTarget(event)
                if (target.tagName.toLowerCase() == ‘li’) {
                    var input = document.getElementsByTagName(‘input’)[0]
                    input.value = target.innerHTML
                }
                ul.innerHTML = ”
                classOperate.removeClass(ul, ‘ul’)
                test.style.border = ‘1px solid #b8b8b8’
            })
            //输入时弹出提示框
            EventUtil.addHandler(test, ‘input’, function() {
                originalValue = test.value
                var contain = document.getElementsByTagName(‘div’)[0]
                EventUtil.removeHandler(ul, ‘mouseover’, changeColor)
                ul.innerHTML = ”
                classOperate.addClass(ul, ‘ul’)
                var li
                for (var i = 0; i < 4; i++) {
                    li = document.createElement(‘li’)
                    li.innerHTML = ” + i
                    ul.appendChild(li)
                }
                contain.appendChild(ul)
                EventUtil.addHandler(ul, ‘mouseover’, changeColor)
            })
            //当没有值时，变回默认状态
            EventUtil.addHandler(test, ‘keyup’, function() {
                if (test.value == ”) {
                    ul.innerHTML = ”
                    classOperate.removeClass(ul, ‘ul’)
                }
            })
            EventUtil.addHandler(test, ‘keydown’, function(evt) {
                if (test.value != ”) {
                    //if (flag == -1)
                    //{
                    // originalValue = test.value;
                    //}
                    if (evt.keyCode == 40) {
                        flag++
                        flag = flag == lis.length ? -1 : flag
                        if (flag != -1) {
                            for (var i = 0; i < lis.length; i++) {
                                lis[i].style.backgroundColor = ‘white’
                            }
                            lis[flag].style.backgroundColor = ‘#D1EEEE’
                            test.value = lis[flag].innerHTML
                        } else {
                            lis[lis.length – 1].style.backgroundColor = ‘white’
                            test.value = originalValue
                        }
                    }
                    if (evt.keyCode == 38) {
                        flag–
                        flag = flag == -2 ? lis.length – 1 : flag
                        if (flag != -1) {
                            for (var i = 0; i < lis.length; i++) {
                                lis[i].style.backgroundColor = ‘white’
                            }
                            lis[flag].style.backgroundColor = ‘#D1EEEE’
                            test.value = lis[flag].innerHTML
                        } else {
                            lis[0].style.backgroundColor = ‘white’
                            test.value = originalValue
                        }
                    }
                    if (evt.keyCode == 13) {
                        test.blur()
                        ul.innerHTML = ”
                        classOperate.removeClass(ul, ‘ul’)
                    }
                }
            })
            // 收回提示框
            EventUtil.addHandler(document, ‘mouseup’, function(evt) {
                var event = EventUtil.getEvent(evt)
                var target = EventUtil.getTarget(event)
                if (
                    target.tagName.toLowerCase() != ‘input’ &&
                    target.tagName.toLowerCase() != ‘ul’
                ) {
                    ul.innerHTML = ”
                    classOperate.removeClass(ul, ‘ul’)
                }
            })
        </script>
    </body>
</html>
c# 前端模块化开发
前端模块化开发的好处
前端工程化与模块化跨开发
赞(0)
前端开发者 » 前端开发JS模仿搜索引擎提示框（无后端数据）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论