Jquery — взаимодействие с контактным полем
Эй, ребята, я пытаюсь создать контактное взаимодействие. Когда мы нажимаем на любое поле, текст метки должен подниматься вверх. Я пробовал, но не сработало, а также прикрепил свой код для большей ясности. Вы можете мне помочь? Спасибо:)
$('.form-grid').keyup(function() {
if ($(this).val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}<div class = "form-grid">
<input type = "text">
<label> Name </label>
</div>
<div class = "form-grid">
<input type = "email">
<label> Email </label>
</div>
<div class = "form-grid">
<input type = "tel">
<label> Phone </label>
</div>
<div class = "form-grid">
<textarea></textarea>
<label> Message </label>
</div>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это связано с тем, что элемент $(this) в вашем коде фактически ссылается на узел div.form-grid, к которому не привязано значение. Вам нужно выбрать вложенный элемент input/textarea, т.е. $(this).find('input, textarea').first().val():
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
См. доказательство концепции ниже:
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "form-grid">
<input type = "text">
<label> Name </label>
</div>
<div class = "form-grid">
<input type = "email">
<label> Email </label>
</div>
<div class = "form-grid">
<input type = "tel">
<label> Phone </label>
</div>
<div class = "form-grid">
<textarea></textarea>
<label> Message </label>
</div>Однако я бы посоветовал не привязывать прослушиватель событий keyup к обертке div.form-grid. Что вы можете сделать, так это привязать прослушиватель событий input к элементу ввода внутри div.form-grid, а затем вместо этого просто переключить класс на родительский элемент:
$('.form-grid input, .form-grid textarea').on('input', function() {
var $formGrid = $(this).closest('.form-grid');
if (this.value)
$formGrid.addClass('active');
else
$formGrid.removeClass('active');
});.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "form-grid">
<input type = "text">
<label> Name </label>
</div>
<div class = "form-grid">
<input type = "email">
<label> Email </label>
</div>
<div class = "form-grid">
<input type = "tel">
<label> Phone </label>
</div>
<div class = "form-grid">
<textarea></textarea>
<label> Message </label>
</div>это одна часть проблемы, другая заключается в том, что он хочет, чтобы метка повышалась на .click(), и он использует .keyup().
@ Coder95 Обновил мой ответ, я забыл, что у вас есть элемент <textarea>. Я также предложил лучший подход.
@ Coder95 Плохо, исправил код сейчас. Используйте $(this).find('input, textarea').first().val()
Ничего не происходит. не знаю почему :(
@ Coder95 Посмотрите демонстрацию кода (как скрытую, так и отображаемую) в моем ответе. Они работают.
Не добавлять активный класс. Не происходит взаимодействия.
@ Coder95 Я не знаю, что у вас происходит, потому что у меня работают оба фрагмента кода. В ваших комментариях есть кнопка редактирования: вы можете обновить свои комментарии в течение 5 минут после публикации, вместо того, чтобы оставлять новый однострочный комментарий каждую секунду.
Добавьте отношение класса к каждому входу для обработки тега метки
<div class = "form-grid">
<textarea></textarea>
<label for = "text_input"> Message </label>
</div>
В скрипте keyup функция
$('label[for = "text_input"]').hide()
Попробуй.
Попробуйте этот метод, он работает нормально.
$('.form-grid').on("input", function() {
$('.form-grid').removeClass('active');
$(this).addClass('active');
});
Вы должны просто использовать веб-фреймворк. Вот пример: material-components.github.io/material-components-web-catalog/#/…