Having just started learning JavaScript, I am struggling to figure out how to use JavaScript to clear the text in a text box and move it below the box when a user starts typing.
I've been watching this tutorial http://codepen.io/ehermanson/pen/KwKWEv/ (where you can see the effect when typing in the field), but instead of using the provided CSS, I'm trying to achieve the same result using compiled CSS. However, the uploader has not included a CSS alternative for the JavaScript code which is written in SCSS, so I'm unsure how to proceed.
Below is my code. Dreamweaver is also flagging that there is a missing "use strict" statement in my JavaScript code and that 'target' is undefined. I believe my HTML and CSS are correct, but any feedback would be appreciated.
$('.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 code snippet */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" script src="login.js"></script>
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#signup">Your Personal Orlangutan</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 -->
</div> <!-- /form -->
</body>
</html>