类似于placehoder效果的图标展示

在做app开发的时候往往会有那个注册登录啊，什么的页面，里面就会包含这那种类似于placeholder的效果的图标，当时我也是和ios和安卓混合开发一款app里面的页面全是我写，最开始就是登陆啊，注册页面，这个效果耗费了我好久时间，废了不少时间才找到方法：

效果图如下图：

就类似于上图所指的那个小电话按钮的效果，当你输入东西的时候图标和文字会一块消失，当你的输入框里面为空的时候，小图标就会随着文字一块出现；其实有很多框架直接就给我们封装好了方法，我们直接调用就可以了，但我这里说的是原生js的写法去写这个效果；代码如下：（提示下，这里是jquery里面的写法）

$( "#login_mima" ).on("input propertychange", function(){

       if($("#login_mima" ).val()!="" ){

         $( "#login_yaoshitubiao" ).hide();

      } else if($("#login_mima").val()== ""){

         $( "#login_yaoshitubiao" ).show();

      }

   })

其实原理很简单就是给那个input输入框加一个事件监听的方法，时时刻刻监听input里面是否有内容，有的话就让图标隐藏，没有的话就让图标显示出来；嘻嘻；很简单的一个小效果；望能帮到一些道友！