ホームページ > ウェブフロントエンド > htmlチュートリアル > html および javascript_html/css_WEB-ITnose を使用してこの効果を実現する方法

html および javascript_html/css_WEB-ITnose を使用してこの効果を実現する方法

WBOY
リリース: 2016-06-24 12:02:31
オリジナル
1065 人が閲覧しました

デフォルト

メールアドレスが正しく入力された後


ディスカッションに返信(解決策)

デフォルト

メールアドレスが正しく入力された後


一番外側はdivで、その上に入力ボックスがあります。左と右の画像

<!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 までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート