<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="Font/demo-files/demo.css"/>

    <style>

        /*1.此处应我的项目需要，加了些特别的设置，如字体、背景色等，按需添加；

            2.内层input不加边框，看起来效果会自然一点，所以外层div设置了边框和圆角*/

        .box{

            margin: 50px auto;

            background-color: #ffffff;

            border: 1px solid #eeeeee;

            border-radius: 6px;

            font-size: .52rem;

            text-align: center;

            color: #d2d2d2;

        }

        /*label标签样式 放在.box下，不至于影响其他的label

              采取绝对定位，位置根据需求确定*/

        .box label{

            z-index: ;

            position: absolute;

            left: %;

            margin-left: -%;

            color: #B2B2B2;

            top: .8rem;

            font-weight: normal;

        }

        /**

          *input标签样式

          *宽度适应外层div

          *隐藏边框

          *这里有个小技巧，height与line-height值相等，可保证文字垂直居中；但我发现文字比图标略偏下，进行了微调；

        */

        .box input{

            text-indent: 10px;

            height: .04rem;

            line-height: .04rem;

            width: %;

            border: none;

            outline: none;

        }

        /**

          *图标样式

          *绝对定位，自定义颜色

        */

        .box i{

            position: absolute;

            top: .8rem;

            left: %;

            /*margin-left: -15%;*/

            color: #B2B2B2;

        }

    </style>
//具体样式自行按照情况调节

</head>

<body>

    <div class="box">

        <label for="q" id="q_label">请输入关键字</label>

        <input id="q"  type="text">

        <i class="icon icon-search" id="q_i"></i>

    </div>

     <script src="js/libs/jquery.3.1.1.js"></script>

    <script>

        // js判断input输入框中是否有值，以此来判断是否隐藏默认提示信息

        //使用keyup事件

        $(function() {

            $('#q').on('keyup',function() {

                var len = document.getElementById('q').value;

                if(len == ''){

                    $('#q_label').show();

                    $('#q_i').show();

                }else{

                    $('#q_label').hide();

                    $('#q_i').hide();

                }

            });

        })

    </script>

</body>

</html>

再做项目的时候经常遇到的问题，以前只是做静态页面，现在要加效果了，所以百度了一下，觉得特别有帮助到我。所以跟你们分享一下

input框中如何添加搜索的更多相关文章

  1. input框中自动展示当前日期 yyyy/mm/dd

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 解决input框中加入disabled="disabled"之后，改变字体的颜色（默认的是灰色）

    在input框中加入disabled="disabled"之后,字体默认的就变成灰色了 解决方案 input[disabled]{color:#fff;opacity:1} dis ...

  3. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  4. 小程序登录时如何获取input框中的内容

    最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...

  5. js—input框中输入数字，动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  6. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  7. 税号输入框 将input框中的输入自动转化成半角大写

    这两天出了这么一个需求,输入税号的时候,需要自动将其转化为半角大写,并且阻止标点符号中文汉字的输入.(下面会有:全半角转换.文本框选中.光标位置判断.设置光标位置 这些内容) 然后我就开始了慢慢查找资 ...

  8. input框中的value值到底是什么

    value 属性为 input 元素设定值. 对于不同的输入类型,value 属性的用法也不同: type="button", "reset", "s ...

  9. input框中的name和id的区别

    1. 可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而 ...

随机推荐

  1. web 应用的部署

    一.项目管理 : zentao(国产开源),其他 project.redmine.trac 二.自动部署: jenkins:自动化配置 docker:容器,类似虚拟机,不过只是本机系统的内核的一个虚拟 ...

  2. Scrapy 抓取股票行情

    安装scrapy会出现错误,我们选择anaconda3作为编译环境,搜索scrapy安装(有错误自查) 创建scrapy爬虫项目: 调出cmd,到相应目录:输入: scrapy startprojec ...

  3. Jquery sblings

    $("给定元素").siblings(".selected") 中的(".selected")表示筛选给定元素类名为.selected的同胞 ...

  4. 基础篇：6.9）GD&T较线性尺寸公差的优缺点

    本章目的:理解GD&T标注对比线性/传统/坐标尺寸公差的优势,但也不要忘记其使用限制. 1.线性尺寸公差   1.1 定义 线性尺寸公差=传统尺寸公差=坐标尺寸公差. 传统尺寸公差(Tradi ...

  5. 4G和有线网络的自动切换

    最近项目有个需求,把移动服务器设备(Ubuntu14.04)安装4G模块,但如果连接有线时,可以自动切换到有线,以降低移动流量带来的费用. 以下是我实现的方法(经过一番痛苦的摸索) 1. 脚本/opt ...

  6. C++经典面试题汇总

    1. 下面代码输出什么?为什么?(初始化列表) #include<iostream> using namespace std; class Test { int m_i; int m_j; ...

  7. mysql 设置默认时间为now()

    TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...

  8. docker 容器 centos + tomcat + jdk

    环境: 阿里云ecs服务器 步骤: 1.安装docker 2.获取centos镜像 3.下载tomcat 和 jdk 安装包 4.配置 1.安装docker https://www.cnblogs.c ...

  9. 转 crs damon can't start 2个例子

    ###sample 1 "node 1 (10.198.127.5): ps -ef|grep ora.crsd root 45613166 47185944 0 10:24:35 pts/ ...

  10. SpringCloud---API网关服务---Spring Cloud Zuul

    1.概述 1.1 微服务架构出现的问题   及  解决: 1.1.1 前言 每个微服务应用都提供对外的Restful API服务,它通过F5.Nginx等网络设备或工具软件实现对各个微服务的路由与负载 ...