<!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. 多个tomcat一起运行

    1.默认为:8005 2.在D:\apache-tomcat-7.0.85\bin目录下,找到startup.bat,打开并修改. 3.在D:\apache-tomcat-7.0.85\bin目录下, ...

  2. 浅析PHP反序列化漏洞之PHP常见魔术方法（一）

    作为一个学习web安全的菜鸟,前段时间被人问到PHP反序列化相关的问题,以前的博客中是有这样一篇反序列化漏洞的利用文章的.但是好久过去了,好多的东西已经记得不是很清楚.所以这里尽可能写一篇详细点的文章 ...

  3. 《Paxos Made Simple》翻译(转)

    1 Introduction 可能是因为之前的描述对大多数读者来说太过Greek了,Paxos作为一种实现容错的分布式系统的算法被认为是难以理解的.但事实上,它可能是最简单,最显而易见的分布式算法了. ...

  4. proxyTable设置跨域

    如何设置跨域 1.在config--index.js 中配置 proxyTable: { '/api': { target: 'http://www.xxx.com', //目标接口域名 change ...

  5. PZ73H-PZ73X刀闸阀厂家，PZ73H-PZ73X刀闸阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 PZ73H-PZ73X刀闸阀 无极资讯网精心为您挑选了(PZ73H-PZ73X刀闸阀)信息,其中包含了(PZ73H-PZ73X刀闸阀)厂家,( ...

  6. sql根据表中数量字段自动复制记录行

    客户需要将表中统计好的数据还原成统计前的原始记录 例如: ID Name QTYCount100 Name1 1101 Name2 2102 Name3 3103 Name4 4104 Name5 5 ...

  7. volatile与synchronized实现原理

    参考文章:https://www.cnblogs.com/charlesblc/p/5994162.html --------------------------------------------- ...

  8. C++析构函数（转）

    创建对象时系统会自动调用构造函数进行初始化工作,同样,销毁对象时系统也会自动调用一个函数来进行清理工作(例如回收创建对象时消耗的各种资源),这个函数被称为析构函数. 析构函数(Destructor)也 ...

  9. MySql的视图

    视图是从一个或多个表中导出的表.是一种虚拟存在的表.视图就像一个窗口,通过这个窗口可以看到系统专门提供的数据.这样,用户可以不用看到整个数据库表中数据,而只关心对自己有用的数据.视图可以使用户的操作更 ...

  10. FocusBI: SQL Server内核

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...