Home >Web Front-end >HTML Tutorial >How to achieve this effect through html and javascript_html/css_WEB-ITnose
How to achieve this effect through html and javascript_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:311065browse
Default
After entering the correct email address
Reply to discussion (solution)
Default
After entering the correct email address
The outermost part is a div with an input box on the left and an image on the right
<!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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS writing, basic syntax issues_html/css_WEB-ITnoseNext article：CSS writing, basic syntax issues_html/css_WEB-ITnose