純Javascript監聽輸入值變化

Question

有什么辦法可以創建一個常量 function 來監聽輸入，所以當輸入值發生變化時，會立即觸發某些東西？

我正在尋找使用純 javascript 的東西，沒有插件，沒有框架，我無法編輯 HTML。

某事，例如：

當我更改輸入MyObject中的值時，此 function 運行。

有什么幫助嗎？

Answer 1

這就是事件的目的。

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

Answer 2

作為一個基本的例子......

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/

Answer 3

實際上，打勾的答案是完全正確的，但答案可以是ES6形式的：

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

或者可以寫成如下：

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

Answer 4

默認用法

el.addEventListener('input', function () {
    fn();
});

但是，如果您想在通過 JS 手動更改輸入值時觸發事件，您應該使用自定義事件（任何名稱，如 'myEvent' \\ 'ev' 等）如果您需要監聽表單 'change' 或 'input' 事件並且您通過 JS 更改輸入值 - 您可以將自定義事件命名為“更改”\\“輸入”，它也可以工作。

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

Answer 5

2020 年的另一種方法可能是使用document.querySelector() ：

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});

Answer 6

Keydown、keyup、input 是在輸入更改時立即觸發的事件，我會使用 keydown 或 input 事件從輸入框中獲取更改的值。

const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// your code goes here 
 console.log(myObject.value);
});

Answer 7

如果您想在每次鍵盤上有一個擊鍵時監視更改。

const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
   console.log('test') 
})

Answer 8

昆汀回答的不同版本：

HTMLInputElementObject.addEventListener('input', (e) => {
    // Do something here...
});

Answer 9

每次用戶輸入一些值時，做一些事情。

var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});

Answer 10

而不是 id 使用標題來標識您的元素並編寫如下代碼。

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});