如何通过html,javascript 实现这个效果_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:02:31
原创
1037 人浏览过

默认

邮箱输对了以后


回复讨论(解决方案)

默认

邮箱输对了以后


最外面是一个div,里面左边input框,右边一个图像

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <title>test</title>    <link rel="stylesheet" type="text/css" href="http://iconfont.cn/assets/application-7fe01c67f0bffcd30bd1ca90c54c3c2f.css" media="all"/>    <style type="text/css">        .wrap{ width:350px;border:1px solid #ccc;}        .wrap *{ display:inline-block;}        .text{width: 90%; border:none;}        .icon{ width:16px; height:16px; background:url(https://passport.jd.com/new/misc/skin/df/i/login-all-bg.png) -373px -111px no-repeat;}        .ok{ background-position:0 -241px;}    </style>    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script></head><body><div id="wrap" class="wrap"><input type="text" class="text" name="" id=""/><span class="icon"></span></div><script type="text/javascript">    function isEmail(val){        return /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val);    }    $('.text').keyup(function(){        var el = $(this).next();        if(isEmail($(this).val())){            el.addClass('ok');        } else {            el.removeClass('ok');        }    });</script></body></html>
登录后复制

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板