|
|
10.01.2017, 07:41
|
 |
Новичок на форуме
|
|
Регистрация: 03.01.2017
Сообщений: 8
|
|
|
проверка на заполненость input
Привет!
Помогите написать пару строк кода, пожалуйста.
Есть input имеющий class="test", если поле заполнено, то добавляем class="test green". Если опять пустое, то удаляем класс "green".
Вот в принципе такую простую вещь мне надо, заранее спасибо!
|
|
10.01.2017, 09:41
|
|
Аспирант
|
|
Регистрация: 27.03.2015
Сообщений: 78
|
|
как например такой вариант?
<input id="my_input" class="test">
<script>
var input = document.getElementById("my_input");
input.addEventListener('input', function(e){
if(!e.target.classList.contains('green')) {
e.target.classList.add('green');
}
if(!e.target.value) {
e.target.classList.toggle('green');
}
});
input.addEventListener('blur', function(e){
if(!e.target.value && e.target.classList.contains('green')) {
e.target.classList.toggle('green');
}
});
</script>
Последний раз редактировалось innowed, 10.01.2017 в 09:49.
|
|
10.01.2017, 10:03
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
innowed,
многовато будет 
|
|
10.01.2017, 23:16
|
|
Новичок на форуме
|
|
Регистрация: 03.01.2017
Сообщений: 8
|
|
Работает, но и без
<input id="my_input" class="test">
<script>
...
...
input.addEventListener('blur', function(e){
if(!e.target.value && e.target.classList.contains('green')) {
e.target.classList.toggle('green');
}
});
</script>
Для чего он? |
|
11.01.2017, 00:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
<script>
window.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('.test');
input.addEventListener('input', function(e){
this.classList[ this.value?'add':'remove']('green');
});
});
</script>
<style type="text/css">
.green{
border: 5px solid #008000;
}
</style>
<input id="my_input" class="test">
|
|
11.01.2017, 20:44
|
|
Новичок на форуме
|
|
Регистрация: 03.01.2017
Сообщений: 8
|
|
Спасибо, идеально  |
|
12.01.2017, 03:06
|
|
Новичок на форуме
|
|
Регистрация: 03.01.2017
Сообщений: 8
|
|
Изначально не так поставил вопрос потому что не додумался что не будет работать несколько input-ов с таким кодом, или для каждого input'а прописывать свой индивидуальный id и применять этот код? или же есть способ проще?
<script>
window.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('.test');
input.addEventListener('input', function(e){
this.classList[ this.value?'add':'remove']('green');
});
});
</script>
<style type="text/css">
.green{
border: 5px solid #008000;
}
</style>
Input1:
<input id="my_input" class="test">
Input2:
<input id="my_input" class="test">
Input3:
<input id="my_input" class="test">
|
|
12.01.2017, 05:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
skwz,
id уникально!!! не повторимо в нормальном коде, назначать циклом по всем элементам или делегирование.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
form.addEventListener('input', function(e){
var el = e.target;
el.classList.contains('test') && el.classList[ el.value?'add':'remove']('green');
});
});
</script>
<style type="text/css">
.green{
border: 5px solid #008000;
}
</style>
</head>
<body>
<form action="http://" >
Input1:
<input class="test">
Input2:
<input class="test">
Input3:
<input class="test">
</form>
</body>
</html>
|
|
12.01.2017, 05:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
input:valid {
background: #E4F6DE;
}
input:invalid {
background: #FFEBEB;
}
</style>
</head>
<body>
<input required="" />
<input required="" />
</body>
</html>
|
|
|
|
