zoukankan      html  css  js  c++  java
  • 类似于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里面是否有内容,有的话就让图标隐藏,没有的话就让图标显示出来;嘻嘻;很简单的一个小效果;望能帮到一些道友!
  • 相关阅读:
    SQL优化总结之一
    web前端扩展性知识点
    canvas
    开动大脑js小案例(有空就更新的那种)
    本博客在手,jQuery无敌
    小程序整理(持续更新)
    样式初始化代码
    ajax中的async
    跨域问题解决
    ES6学习笔记(持续更新中)
  • 原文地址:https://www.cnblogs.com/lijuntao/p/6475618.html
Copyright © 2011-2022 走看看