类似于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里面是否有内容,有的话就让图标隐藏,没有的话就让图标显示出来;嘻嘻;很简单的一个小效果;望能帮到一些道友!
原文地址:https://www.cnblogs.com/lijuntao/p/6475618.html