<!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. TabBarIOS

    参考:http://blog.csdn.net/wmmhwj/article/details/68483592 import React, { Component } from 'react';imp ...

  2. Log中关于start meeting在zVideoApp和zVideoUI中的流程可以搜索的几个字符串

    [31356:36164:04-29/17:53:38.164:INFO:SBConfUI.cpp(940)] CSBConfUI::OnConfStatusChanged(CONF_STATUS) ...

  3. 设计模式 — 建造者（生成器）模式（Builder）

    考虑这样一种业务场景,我们构建一个业务对象,但是这个业务对象及其复杂.为了代码的根号的可读性,我们会把这个对象的构建过程根据精密联系的程度来拆分成几个类来完成.最后再放到一起使用来生成复杂对象.这个业 ...

  4. MqttNet 通讯

    MQTT,IBM发明的物联网通讯协议基于tcp ip , 收集传感器上的数据. 下图理解:  broker 这里有很多消息,根据主题不同来进行区分,它这里可以保管所有连过来的客户端的数据,然后客户端, ...

  5. 《架构设计之[CAP定理]》读后感

    现在有许多互联网项目都是采用分布式结构进行部署.而cap定理是分布式系统中最近出的原则.所以对于哦我们来说,学习cap非常重要.CAP定理又称为布鲁尔定理.CAP定理是指对于一个分布式系统,不能同时满 ...

  6. jsp基础知识总结

    1.了解jsp,jsp有什么有利的,有什么弊端. jsp是serlet的扩展,在web应用中,每个jsp页面都会有servlet容器生产对应的servlet. jsp通过在标准的html页面中插入ja ...

  7. ubuntu 16.04 屏幕截图

    shift+prtsc   快捷键截取指定区域的图片 类似qq截图

  8. 《C++ Primer（第五版）》知识巩固

    运行平台:ubuntu 12.04/GCC 4.8.0 第二章:基本内置类型 1.decltype类型指示符 当我们从表达式的类型来推断要定义的类型时,可以使用decltype()来解析:declty ...

  9. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

  10. 快速上手：在CVM上安装Apache

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由一步 发表于云+社区专栏 介绍 Apache HTTP服务器是世界上使用最广泛的Web服务器.它提供了许多强大的功能,包括可动态加载的 ...