Чи можу я якось створити постійну функцію, яка прослуховує вхідні дані, тож коли це вхідне значення змінюється, щось негайно спрацьовує?
Я шукаю щось, використовуючи чистий javascript, без плагінів, без фреймворків, і я не можу редагувати HTML.
Щось, наприклад:
Коли я змінюю значення на вході MyObject, ця функція запускається.
Будь-яка допомога?
Відповіді:
Для цього і потрібні події .
HTMLInputElementObject.addEventListener('input', function (evt) {
something(this.value);
});
typeof this.valueце string. Якщо потрібне число, перетворіть його за допомогою parseInt або parseFloat .
Як основний приклад ...
HTML:
<input type="text" name="Thing" value="" />
Сценарій:
/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
/* function */
function doThing(){
alert('Horray! Someone wrote "' + this.value + '"!');
}
Ось скрипка: http://jsfiddle.net/Niffler/514gg4tk/
Насправді, позначена відповідь є абсолютно правильною, але відповідь може бути у ES6формі:
HTMLInputElementObject.oninput = () => {
console.log('run'); // Do something
}
Або можна написати так:
HTMLInputElementObject.addEventListener('input', (evt) => {
console.log('run'); // Do something
});
Використання за замовчуванням
el.addEventListener('input', function () {
fn();
});
Але , якщо ви хочете викликати подію, коли ви вручну змінюєте значення входів через JS, ви повинні використовувати спеціальну подію (будь-яке ім'я, наприклад, "myEvent" \ "ev" тощо), ЯКЩО вам потрібно прослухати форми "змінити" або "ввести" подію і ви змінюєте значення входів за допомогою JS - ви можете назвати свою власну подію 'change' \ 'input', і це теж буде працювати.
var event = new Event('input');
el.addEventListener('input', function () {
fn();
});
form.addEventListener('input', function () {
anotherFn();
});
el.value = 'something';
el.dispatchEvent(input);
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
Іншим підходом у 2020 році може бути використання document.querySelector():
const myInput = document.querySelector('input[name="exampleInput"]');
myInput.addEventListener("change", (e) => {
// here we do something
});
замість ідентифікатора використовуйте заголовок, щоб ідентифікувати ваш елемент і написати код, як показано нижче.
$(document).ready(()=>{
$("input[title='MyObject']").change(()=>{
console.log("Field has been changed...")
})
});