Использование события onblur для полей множественной формы

У меня есть простая функция, которая применяет форматирование к полю формы с помощью события onblur - если в поле введено 7 символов, граница поля становится зеленой. Менее 7 символов приводит к красной границе. Я хотел бы иметь возможность применять функцию к каждому полю формы отдельно, когда пользователь заносит вкладки. В настоящее время, если я заполняю первое поле формы, оба поля формы форматируются одновременно. Я думаю, что ответ использует цикл for, который выполняет итерацию через входные данные, я просто не знаю, как обновить свой код, чтобы отразить это; Буду признателен за любую оказанную помощь.Использование события onblur для полей множественной формы

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
function charCount() { 
var char = document.getElementById("numb").value.toString().length 
if (char == 7) { 
    $("input").addClass("green").removeClass("red"); 
} else { 
$("input").addClass("red").removeClass("green"); 
} 
} 
</script> 

<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 

<body> 
<p>Please input ID numbers:</p> 
<input id="numb" maxlength = 7 onblur="charCount()"> 
<input id="numb" maxlength = 7 onblur="charCount()"> 

</body> 
</html>

источник

2017-01-15 lezzelz

1.- Вы не может иметь тот же идентификатор для нескольких входов. Вместо этого используйте класс.

2.- Затем используйте «это», чтобы иметь ссылку на вход, который используется Вот рабочее решение. Надеюсь, поможет!

$(".numb").blur(function(){ 
 
     var char = $(this).val().length; 
 
     if (char == 7) { 
 
      $(this).addClass("green").removeClass("red"); 
 
     } else { 
 
      $(this).addClass("red").removeClass("green"); 
 
     } 
 
    });

.green {border-color:#009900;} 
 
.red {border-color:#990000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>Please input ID numbers:</p> 
 
<input class="numb" maxlength = 7> 
 
<input class="numb" maxlength = 7>

источник

2017-01-15 19:34:46 HenryDev

это замечательно, идеально. И да, ха-ха, немного смутился, что я нарушил правило №1. Большое спасибо за Вашу помощь. – lezzelz

некоторые точки мат:

Первое, элементы не должны иметь тот же идентификатор в одном HTML документе. Они могут иметь одинаковый класс, но не идентификаторы.
document.getElementById("numb").value.toString().length вы пытаетесь найти вход пользователя, используя этот оператор. Это всегда будет выбирать значение из одного конкретного элемента. Лучше использовать $(this) в обработчике событий (предположим, вы используете jquery и знаете, как это сделать)
$("input").addClass используя это .. вы ориентируетесь на все элементы ввода, присутствующие в документе. Определите, к чему вы хотите настроить.

Делают это так: HTML:

<input class="numb" maxlength = 7 onblur="charCount()"> 
<input class="numb" maxlength = 7 onblur="charCount()">

JS:

$('.numb').on('blur', function() { 
    // you access the current input elem with $(this) 
    var inputElem = $(this); 
    var char = inputElem.val().length; 
    if (char == 7) { 
     inputElem.addClass("green").removeClass("red"); 
    } else { 
     inputElem.addClass("red").removeClass("green"); 
    } 
});

источник

2017-01-15 19:53:16

Спасибо @Yogesh! Ничего себе, я не могу поверить, что дважды использовал идентификатор, даже знаю, что это неправильно. , , Думаю, я слишком долго смотрел на код. Ценить это! – lezzelz

Есть несколько проблем в вашем коде:

1) При использовании этого переключателя $("input") Вы применяете класс ко всем входам вместо определенного ввода. Вам нужно создать селектор, который нацелен на конкретный ввод, который размыт.

$("input").addClass("green").removeClass("red");

2) Вы используете тот же идентификатор для обоих входных элементов

<input id="numb" maxlength = 7 onblur="charCount()"> 
<input id="numb" maxlength = 7 onblur="charCount()">

3) Вы смешиваете селекторы ванили Javascript и JQuery, которые могут вызвать проблемы, то лучше использовать один или другой для твоя ясность.

ВЕРСИЯ: Это версия с минимальными изменениями в том, что вы уже придумали, но способ, которым вы присоединились к мероприятию, довольно неэффективен.

<script> 
function charCount(num) { 
var elem = $("#numb" + num); 
var char = elem.value.toString().length; 

if (char == 7) { 
    $(elem).addClass("green").removeClass("red"); 
} else { 
    $(elem).addClass("red").removeClass("green"); 
} 
} 
</script> 

<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 

<body> 
<p>Please input ID numbers:</p> 
<input id="numb1" maxlength = 7 onblur="charCount(1)"> 
<input id="numb2" maxlength = 7 onblur="charCount(2)">

ЛУЧШИЙ ВАРИАНТ:

<html> 
</head> 
<script> 
function init() { 
    $('input').on('blur', function() { 
     var elem = $(this); 
     if(elem.val().length < 7) { 
     elem.addClass('red').removeClass('green'); 
     } 
     else { 
     elem.removeClass('red').addClass('green'); 
     } 
    }); 
} 
$(document).ready(init); 
</script> 
<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 
<body> 
<p>Please input ID numbers:</p> 
<input maxlength = 7> 
<input maxlength = 7> 
</body> 
</html>

Событие лучшим решением было бы использовать IIFEs.

Я хотел бы предложить вам пройти через некоторые ресурсы для обучения обработки событий: https://learn.jquery.com/events/handling-events/ https://api.jquery.com/category/events/ http://gregfranko.com/blog/jquery-best-practices/

Надеется, что это помогает!

источник

2017-01-15 20:24:23 poushy

Использование события onblur для полей множественной формы

ответ

Смежные вопросы