JavaScript仿京东搜索框实例_javascript技巧

马上就到双十一了，我们在京东淘宝购物，疯狂剁手的同时，有没有注意到京东的搜索框呢，除了能进行搜索内容以外，它的样式又是如何实现的呢？

下面就分析一下如何实现仿京东的搜索框。

核心分析：

JavaScript部分：

1、当文本框获取焦点的时候，div中的字体颜色变为rgb(200,200,200)；

2、当文本框失去焦点事件发生时，div中的字体颜色变成原来的样式#989898；

3、当文本框输入内容时，div的属性变为 none，表现效果为文字消失；

4、当清除文本框里面内容时，divdiv的属性变为 inline-block，表现效果为文字消失；

因为是在文本框里面显示出来的内容，改变的是表单元素，判断文本框里面是否有输入内容，判断的依据是  表单的value值是否为 空字符串。

实现代码：

    
    
    

    

        
暗夜游戏本
        
        
            
        
        
            
        
    

    

显示效果：

1、未触发事件的状态

2、输入框里获取焦点的状态

3、输入框里输入内容

4、删除里面内容后

5、CSS样式效果（hover）