JavaScript仿京东搜索框实例

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

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

核心分析：

JavaScript部分：

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

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

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

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

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

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿京东搜索框</title>
    <style>
    *{
        margin: 0;padding:0;
    }
    .from{
        border:2px solid #e2231a;
        width:490px;
        height:36px;
        position:relative;
        margin:100px auto;
        font-size: 12px;

    }
    .text{
        position:absolute;
        line-height: 36px;
        left:27px;
        color:#989898;
        z-index:-1;
    }
    .search{
        position:absolute;
        left:22px;
        width:430px;
        height:34px;
        outline:none;
        border:1px solid transparent;
        background:transparent;
        line-height: 34px;
        overflow: hidden;

    }
    .button{
        position:absolute;
        right:0px;
        width:58px;
        height:36px;
        background-color: #e2231a;
        border:1px solid transparent;
        margin:auto;
        outline:none;
        cursor: pointer;
    }
    button:hover{
        background-color: #c81623;
    }
    span img{
        position:absolute;
        right:65px;
    }

    </style>
</head>
    <div class='from'>
        <div class='text'>暗夜游戏本</div>
        <input type="text" class="search" value=''>
        <span class='photo' title="未选择取任何文件">
            <img src="camera.png" alt="">
        </span>
        <button class='button'>
            <i><img src="search.png"  alt=""></i>
        </button>
    </div>
<body>
    <script>
    var div = document.querySelector('.from');
    var input = document.querySelector('.search');
    var text = document.querySelector('.text');
    input.onfocus = function(){
        text.style.color = 'rgb(200,200,200)'
    }
    input.onblur = function(){
        text.style.color = '#989898'
    }
    input.oninput = function(){
        text.style.display = 'none';
    if (input.value == '') {
        text.style.display = 'inline-block';
    };    }
    </script>
</body>
</html>

显示效果：

1、未触发事件的状态

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

3、输入框里输入内容

4、删除里面内容后

5、CSS样式效果（hover）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Vue.js实现简单搜索框

    基于Vue.js实现简单搜索框

    在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search 主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果 这里有两个组件,一个组件是logo部分的,一个是搜索框部分的. html html很简单,就是引用两个组件. <div id="app"> <logo-pic

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!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">

  • 自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

  • JavaScript实现百度搜索框效果

    JavaScript实现百度搜索框效果

    最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <

  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <

  • JS+Ajax实现百度智能搜索框

    JS+Ajax实现百度智能搜索框

    首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

  • JS实现京东首页之页面顶部、Logo和搜索框功能

    JS实现京东首页之页面顶部、Logo和搜索框功能

    昨天我们主要讲了京东首页的基本布局,今天我们主要来逐步实现京东首页的页面顶部.Logo&搜索框.首先我们来看下我们今天将要实现的效果: 下面页面布局详细分析: 1.页面头部分三个部分依次实现:五角星图.收藏京东.右边文字部分(用列表实现): 其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案:当鼠标悬停在客服服务上,出现下拉列表. 2.Logo&搜索框分四个部分实现:左边京东Logo.中间搜索框(上部:快速搜索:下部:热门搜索).右部我的京东&去购物车(步骤类似我

随机推荐