0
Будучи новым для JavaScript, я не могу понять, как заставить JavaScript правильно удалить существующий текст в текстовом поле и переместить его под полем после того, как пользователь начнет вводить текст.Как заполнить следующий код JavaScript?
Я был следующим за этим видео http://codepen.io/ehermanson/pen/KwKWEv/ (там где вы можете видеть, что я имею в виду при вводе в поле), но вместо этого я использую скомпилированный CSS для выполнения задачи, однако загрузчик не включил альтернативу CSS для JavaScript и использует SCSS, поэтому я не знаю, как выполнить задачу.
Вот мой код ниже. Dreamweaver также указывает, что в моем JavaScript-коде отсутствует инструкция «use strict» и что «target» не определен. Я считаю, что мои HTML и CSS хороши, но, пожалуйста, не стесняйтесь указывать, если в противном случае.
$('.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);
});*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #454545;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: #5C5C5C;
padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 5px 10px 5px rgba #1D1D1D;
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #454545;
font-size: 20px;
text-align: center;
cursor: pointer;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.tab-group .active a {
background: #FF8216;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: #F9F9F9;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: #FF8216;
}
label.active {
-webkit-transform: translateY(50px);
transform: translateY(50px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #454545;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #FFFFFF;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #FF8216;
}
textarea {
border: 2px solid #454545;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 40px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #FF8216;
color: #454545;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #FFAD51;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}<!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>
Почему вы не используете заполнитель? Когда вы вызываете функцию, которая регистрирует события? – Max
Я не вижу, что вы объяснили, что должен делать код или какая у вас проблема. Я ценю, что мы смотрели видео, но у людей нет на это времени - можете ли вы отредактировать сообщение, чтобы быть немного понятнее? – halfer