<!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. IntelliJ IDEA 版本控制(svn、git) 修改文件后，所属目录的颜色也变化

    IntelliJ IDEA 的版本控制默认文件修改了,所属目录的颜色是不会变化,这很不方便.如: 修改方法如下: File --> settings --> version control ...

  2. scrapyd 参考（https://www.jianshu.com/p/2a189127901a）

    一    Scrapyd简介 Scrapyd 是一个用来部署和运行 Scrapy 项目的应用,由 Scrapy 的开发者开发.其可以通过一个简单的 Json API 来部署(上传)或者控制你的项目. ...

  3. 大数据-hadoop HA集群搭建

    一.安装hadoop.HA及配置journalnode 实现namenode HA 实现resourcemanager HA namenode节点之间通过journalnode同步元数据 首先下载需要 ...

  4. HihoCoder - 1513 bitset处理五维偏序

    题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...

  5. 颠覆我的Thread.join()

    学而时习之,不亦说乎!                              --<论语> 为什么说是颠覆? 1)任何对象都可以作为锁对象,锁对象的行为都是一样的吗?之前我一直认为锁对 ...

  6. jieba和文本词频统计

    ---恢复内容开始--- 一.结巴中文分词涉及到的算法包括: (1) 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG): (2) 采用了动态规划查找最大 ...

  7. my34_脚本冥等添加自动任务-mysql监控部署

    场景: 定义一套添加mysql监控的脚本,在mysql安装完毕后,一键执行添加监控   已有以下的等一系列命令可以读取mysql从库的延迟时间并推向influxdb,变化的部分为 -P 端口.-k k ...

  8. Java_方法的调用②及案例

    语法格式: 方法名称([参数列表]); //注意:只能调用本类的方法 案例: class Method01{ public static void print(){ for(int i = 1; i ...

  9. 用vue建新项目的过程---在工作中

    1.git clone 项目地址 2.如果没装vue-cli,就先装下vue-cli  (如果报错可能是没按管理员身份安装) 3.vue init webpack 项目名 4.安装项目依赖 npm i ...

  10. 没有循环的JavaScript

    有些文章中提到过,缩进(并不能特别准确的)说明了代码的复杂程度.我们想要的是简单的JavaScript.之所以层层缩进,是因为我们用抽象的方式解决问题.但要选用什么抽象方法呢?截止目前,我们没有在特定 ...