<!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. L1-1 天梯赛座位分配

    天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] 支队伍,每队 10 位 ...

  2. js Object.keys 用法

    Object.keys()   可以将对象里的所以的键取出来放到一个数组中 1.传入对象, 返回 包含对象可枚举属性和方法的数组 var obj = {'a': 'Beijing', 'b': 'Ha ...

  3. sql语句之group_concat函数

    MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔 ...

  4. CDH集群安装配置（七）--CDH组件的安装和配置

    1. Clouder Manger页面的配置 访问主节点IP:(cdh1)192.168.80.81:7180 默认用户名和密码:admin,admin 选择一个版本 选择集群的服务器(agent), ...

  5. MongoDB wiredTiger存储引擎下的存储方式LSM和B-Tree比较

    前段时间做拦截件监控的时候把拦截件生命期存入mongodb,因生命期有各种变化,因此对此表的更新写操作非常多,老大给我看了一篇文章,才知道mongodb已经支持lsm存储方式了. 原文如连接:http ...

  6. python -ConfigParser模块讲解

    configParser 模块用于操作配置文件 注:Parser汉译为“解析”之意. 配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键= ...

  7. 我的Python升级打怪之路【五】：Python模块

    模块,是一些代码实现了某个功能的集合 模块的分类: 自定义模块 第三方模块 内置模块 导入模块 import module from module.xx.xx import xx from modul ...

  8. unittest之装饰器

    前面讲到 unittest 里面 setUp 可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间.于是就想是不是可以 ...

  9. git笔记（三）

    详细输出日志 git log --pretty=raw 查看id类型 git cat-file -t fe4c git cat-file -t b36bf6 git  cat-file  -t b08 ...

  10. HtmlUnit 开发网络爬虫

    网络爬虫第一个要面临的问题,就是如何抓取网页,抓取其实很容易,没你想的那么复杂,一个开源HtmlUnit包,几行代码就OK啦! 通常在一个页面中会包含别的Url,在别的Url当中又会包含更多的Url. ...