JavaScript代碼不影響輸出

Question

在下面的代碼中，HTML和CSS代碼工作正常，但JavaScript代碼不影響輸出。 js代碼用於在文本字段中淡出。

的html代碼：

<ul class="tab-group"> 
    <li class="tab active"><a href="#signup">Sign Up</a></li> 
    <li class="tab"><a href="#login">Log In</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="signup"> 
     <h1>Sign Up for Free</h1> 

     <form action="/" method="post"> 

     <div class="top-row"> 
     <div class="field-wrap"> 
      <label> 
      First Name<span class="req">*</span> 
      </label> 
      <input type="text" required autocomplete="off" /> 
     </div> 

     <div class="field-wrap"> 
      <label> 
      Last Name<span class="req">*</span> 
      </label> 
      <input type="text"required autocomplete="off"/> 
     </div> 
     </div> 

     <div class="field-wrap"> 
     <label> 
      Email Address<span class="req">*</span> 
     </label> 
     <input type="email"required autocomplete="off"/> 
     </div> 

     <div class="field-wrap"> 
     <label> 
      Set A Password<span class="req">*</span> 
     </label> 
     <input type="password"required autocomplete="off"/> 
     </div> 

     <button type="submit" class="button button-block"/>Get Started</button> 

     </form> 

    </div> 

    <div id="login"> 
     <h1>Welcome Back!</h1> 

     <form action="/" method="post"> 

     <div class="field-wrap"> 
     <label> 
      Email Address<span class="req">*</span> 
     </label> 
     <input type="email"required autocomplete="off"/> 
     </div> 

     <div class="field-wrap"> 
     <label> 
      Password<span class="req">*</span> 
     </label> 
     <input type="password"required autocomplete="off"/> 
     </div> 

     <p class="forgot"><a href="#">Forgot Password?</a></p> 

     <button class="button button-block"/>Log In</button> 

     </form> 

    </div> 

    </div><!-- tab-content --> 

js代碼

$('.form').find('input, textarea').on('keyup blur focus', function  (e) { 

    var $this = $(this), 
    label = $this.prev('label'); 

    if (e.type === 'keyup') { 
     if ($this.val() === '') { 
     label.removeClass('active highlight'); 
     } else { 
     label.addClass('active highlight'); 
     } 
     } else if (e.type === 'blur') { 
    if($this.val() === '') { 
     label.removeClass('active highlight'); 
     } else { 
     label.removeClass('highlight'); 
     } 
     } else if (e.type === 'focus') { 

     if($this.val() === '') { 
     label.removeClass('highlight'); 
     } 
     else if($this.val() !== '') { 
     label.addClass('highlight'); 
     } 
     } 

     }); 

     $('.tab a').on('click', function (e) { 

    e.preventDefault(); 

     $(this).parent().addClass('active'); 
     $(this).parent().siblings().removeClass('active'); 

     target = $(this).attr('href'); 

     $('.tab-content > div').not(target).hide(); 

    $(target).fadeIn(600); 

    }); 

CSS代碼：

@import "compass/css3"; 

$body-bg: #c1bdba; 
$form-bg: #13232f; 
$white: #ffffff; 

$main: #1ab188; 
$main-light: lighten($main,5%); 
$main-dark: darken($main,5%); 

$gray-light: #a0b3b0; 
$gray: #ddd; 

$thin: 300; 
$normal: 400; 
$bold: 600; 
$br: 4px; 

*, *:before, *:after { 
box-sizing: border-box; 
} 

html { 
overflow-y: scroll; 
} 

body { 
background:$body-bg; 
font-family: 'Titillium Web', sans-serif; 
} 

a { 
text-decoration:none; 
color:$main; 
transition:.5s ease; 
&:hover { 
color:$main-dark; 
} 
} 

.form { 
background:rgba($form-bg,.9); 
padding: 40px; 
max-width:600px; 
margin:40px auto; 
border-radius:$br; 
box-shadow:0 4px 10px 4px rgba($form-bg,.3); 
} 

.tab-group { 
list-style:none; 
padding:0; 
margin:0 0 40px 0; 
&:after { 
content: ""; 
display: table; 
clear: both; 
} 
li a { 
display:block; 
text-decoration:none; 
padding:15px; 
background:rgba($gray-light,.25); 
color:$gray-light; 
font-size:20px; 
float:left; 
width:50%; 
text-align:center; 
cursor:pointer; 
transition:.5s ease; 
&:hover { 
    background:$main-dark; 
    color:$white; 
} 
} 
.active a { 
background:$main; 
color:$white; 
} 
} 

.tab-content > div:last-child { 
display:none; 
} 


h1 { 
text-align:center; 
    color:$white; 
    font-weight:$thin; 
    margin:0 0 40px; 
    } 

    label { 
    position:absolute; 
    transform:translateY(6px); 
    left:13px; 
    color:rgba($white,.5); 
    transition:all 0.25s ease; 
    -webkit-backface-visibility: hidden; 
    pointer-events: none; 
font-size:22px; 
.req { 
margin:2px; 
color:$main; 
} 
} 

label.active { 
transform:translateY(50px); 
left:2px; 
font-size:14px; 
.req { 
opacity:0; 
} 
} 

    label.highlight { 
color:$white; 
} 

input, textarea { 
font-size:22px; 
display:block; 
width:100%; 
height:100%; 
padding:5px 10px; 
background:none; 
background-image:none; 
border:1px solid $gray-light; 
color:$white; 
border-radius:0; 
transition:border-color .25s ease, box-shadow .25s ease; 
&:focus { 
    outline:0; 
    border-color:$main; 
} 
} 

textarea { 
    border:2px solid $gray-light; 
    resize: vertical; 
    } 

.field-wrap { 
position:relative; 
margin-bottom:40px; 
} 

    .top-row { 
    &:after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 

> div { 
float:left; 
width:48%; 
margin-right:4%; 
&:last-child { 
    margin:0; 
} 
} 
} 

.button { 
border:0; 
outline:none; 
border-radius:0; 
padding:15px 0; 
font-size:2rem; 
font-weight:$bold; 
text-transform:uppercase; 
letter-spacing:.1em; 
background:$main; 
color:$white; 
transition:all.5s ease; 
-webkit-appearance: none; 
&:hover, &:focus { 
background:$main-dark; 
    } 
} 

.button-block { 
display:block; 
width:100%; 
} 

.forgot { 
margin-top:-20px; 
text-align:right; 
} 

Answer 1

請使用如下語法

$('form').find('input[type=text],textarea').on(...