Получить селектор ввода, используя это

Question

У меня есть набор полей ввода, которые генерируются динамически, поэтому я не могу использовать идентификатор. Для каждого из полей ввода у меня есть метод focusout, который проверяет значение, введенное конечным пользователем. Если проверка не пройдена, я хотел бы очистить значение ввода и вернуть фокус на тот же ввод. Когда я пытался использовать это ключевое слово, область видимости была настроена на окна, а не на элемент управления вводом.

Скриншот полей ввода:

function validate(reg){
debugger;
if(isNaN(reg)==false){
    return;
}
else
{
    alert("The field should contain number");
    $(this).val(""); //clear the value
    $(this).focus();
}
}

В приведенном выше коде это ключевое слово не работает.

Answer 1

Передайте событие validate(), а затем вы можете использовать event.target нацелить на элемент ввода.

function validate(reg, e){
debugger;
if(isNaN(reg)==false){
    return;
}
else
{
    alert("The field should contain number");
    $(e.target).val(""); //clear the value
    $(e.target).focus();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onfocusout="validate(this.value, event)"/>
<input onfocusout="validate(this.value, event)"/>
<input onfocusout="validate(this.value, event)"/>

Это то, что вы пытаетесь достичь?

Answer 2

Другой метод:

$(document).ready(function () {
    var inputs = document.querySelectorAll("input[type=text]");
    for (i = 0; i < inputs.length; i++)
        inputs[i].addEventListener("focusout", function () { validate(this); });
});

function validate(reg) {
    if (isNaN($(reg).val()) == false) {
        return;
    }
    else {
        alert("The field should contain number");
        $(reg).val(""); //clear the value
        $(reg).focus();
    }
}

<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />