溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

移動(dòng)端開(kāi)發(fā)注冊(cè)、登陸input常用事件(input輸入文字觸發(fā)事件)

發(fā)布時(shí)間:2020-09-05 20:23:05 來(lái)源:網(wǎng)絡(luò) 閱讀:1036 作者:pmlinjian 欄目:開(kāi)發(fā)技術(shù)

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>移動(dòng)端開(kāi)發(fā)注冊(cè)、登陸input常用事件(input輸入文字觸發(fā)事件)</title>

<meta name="keywords" content="積分商城、兌換,春游兌換季,免費(fèi)"/>

<meta name="description" content="積分春游兌換季,更多車主出行超值商品免費(fèi)兌換"/>

<meta http-equiv="content-language" content="zh-cn" />

<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />

<meta name="copyright" content="本頁(yè)版權(quán)歸IICOO所有。All Rights Reserved" />

<meta name="author" content="IICOO" />

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" />

<meta content="telephone=no" name="format-detection" />

<link rel="stylesheet" />


</head>

<body>

<div id="pageWrapper">

    <header class="pass-header">

        <a class="pass-header-back" id="goBack"></a> <span class="pass-header-title">  <span class="pass_header_logo">登錄帳號(hào)</span> </span> <a class="pass-header-links" href="#">注冊(cè)</a> 

    </header>

    <div class="mod-content">

        <form autocomplete="off" method="POST" class="form-wrapper" id="login-formWrapper">

            <p class="error_area" id="error"></p>

            <p class="form-item form-input-wrapper form-item-username">

                <label class="text-label text-label-username" for="login-username" id="login-label-username">帳號(hào)</label>

                <input type="text" name="username" class="text-input" maxlength="60" placeholder="手機(jī)號(hào)/郵箱/用戶名" value="" id="login-username"> <span class="input-clearValue"></span> 

            </p>

            <p class="form-item form-input-wrapper">

                <label class="text-label text-label-password" for="login-password" id="login-label-password">密碼</label>

                <input type="password" name="password" class="text-input" id="login-password" placeholder="密碼" value=""> <span class="input-clearValue"></span>  <span id="login-pwdToggle" class="input-aide input-pwdToggle"></span> 

            </p>

            <p class="form-item"> <span class="form-input-wrapper"> <label class="text-label text-label-verifyCode " for="login-verifycode">驗(yàn)證碼</label> <input type="text" name="verifycode" class="text-input" value="" placeholder="驗(yàn)證碼" autocomplete="off" maxlength="6" id="login-verifycode"> <span class="input-clearValue"></span> </span>

                <img class="verifyCode-img" src="http://wappass.baidu.com/cgi-bin/genp_w_picpath?" width="100" height="40" id="login-verifyCodeImg">

                <a class="change-verifyCode" id="login-verifyCodeChange"></a>

                <input type="hidden" id="login-vcodestr" name="vcodestr" value="">

            </p>

            <p class="form-item form-item-btn">

                <input type="submit" value="登錄" id="login-submit" class="pass-button-full pass-button-full-disabled">

            </p>

        </form>

        <p class="m-lr14 f14 clearfix"> <a class="right" href="#">忘記密碼?</a> 

        </p>

    </div>

    <div class="footer"></div>

</div>


<script type="text/javascript" src="http://baoxian.pingan.com/pa18shopnst/u/wx/product/airDelayNew/js/zepto-1.1.4.build.min.js?t=20151124"></script>

<script type="text/javascript">

 //

 var $loginUsername = $("#login-username")

 var $loginPassword = $("#login-password")

 var $loginPwdToggle = $("#login-pwdToggle");

 $loginPwdToggle.tap(function(){

    //$(this).addClass("input-pwdToggle-show");

    //alert("dd");

    if($loginPassword.attr("type") == "text"){

        $loginPassword.attr("type", "password");

        $loginPwdToggle.removeClass("input-pwdToggle-show");

    }else{

        $loginPassword.attr("type", "text");

        $loginPwdToggle.addClass("input-pwdToggle-show")

    }


 });

//

 $loginUsername.on("input",function(){

        $(this).siblings(".input-clearValue").css("display","block");

 });

//

$loginPassword.on("input",function(){

        $(this).siblings(".input-clearValue").css("display","block");

 });

//

 $(".input-clearValue").tap(function(){

    $(this).siblings("input").val("");

    $(this).css("display","none");

 });

</script>

</body>

</html>


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI