如何更改輸入標記對addEventListener（'change'）的響應？

我使用html輸入標記從用戶處獲取文本。當用戶在輸入元素中輸入一個字符時，我想要輸入他們剛輸入的文本;它看起來像我是每個字母console.log ing。我試圖通過在input標記上添加'change'的事件偵聽器。如何更改輸入標記對addEventListener（'change'）的響應？

爲了證明我的意思，我在下面的代碼簡化我的問題......

<input type="text" id='userInput' placeholder='enter characters here'/>

在JS腳本：

text = document.getElementById('userInput'); text.addEventListener('change', function() { console.log('hello world'); });

我選擇了'change'事件，因爲我認爲將文字輸入input標籤元素將等同於更改該元素，以便每當用戶輸入input元素t，它記錄'你好世界'。

但是，input元素的'change'事件並非我所期望的。實際上發生的事情是，只有當您在input元素內敲入'enter'時，纔會記錄'hello world'（即div的'change'事件看起來可能與按鈕的'change'事件不同）。

我一直在嘗試這種螢火蟲之內，而我在MDN看addEventListener和change文件，並已閱讀了變化事件監聽各種標籤不同。

有誰知道一個辦法修改input變化事件addEventListener登記實際文本的變化，不僅只是當有人點擊進入裏面input？

否則

如果我不能爲input指定'change'事件，沒有人知道的另一種方式來console.log每個字符，因爲它是輸入到input？

來源

2014-11-24 Chris Marie

嘗試'onchange'而不是'change' – Abbath 2014-11-24 06:16:13

@Abbath - Nope。如果你添加事件處理程序內聯，在HTML中，然後'onchange'是正確的。但是，如果使用JS添加事件，則「更改」是適當的。即：''input onchange ='someFunc（）'/>'_or_''帶有一些額外的js：'document.getElementById（'someId'）。addEventListener（'change'，someFunc，假）;' - 後一種方法由於多種原因是可取的。 – enhzflep 2014-11-24 06:19:49

按照您鏈接到MDN裁判：https://developer.mozilla.org/en-US/docs/Web/Events/change

變化，就會引發：

當元素在其值改變後失去焦點，但不是已提交（例如，在MDN再次編輯的價值或

並根據此之後：https://developer.mozilla.org/en-US/docs/Web/Events

變化：

的元素失去焦點，因爲獲得焦點的價值變化。

這意味着只有焦點丟失，但值也應該改變。如果你不改變任何東西，change將不會被解僱。

爲了觀察input的變化，您可以使用input事件。

從MDN再次：https://developer.mozilla.org/en-US/docs/Web/Events/input

當或元件的值改變時，DOM輸入事件被同步地燒製。

你可以看到使用下面的代碼片段。在change你必須tab出input才能看到的價值，而在input的價值可以觀察輸入在input。你也可以使用keyup，但是輸入是做到這一點的方法。

段：

text = document.getElementById('userInput'); 
 
resultChange = document.getElementById('result-change'); 
 
resultInput = document.getElementById('result-input'); 
 
resultKeyup = document.getElementById('result-keyup'); 
 

 
text.addEventListener('change', function() { 
 
    resultChange.innerText = text.value; 
 
}); 
 

 
text.addEventListener('input', function() { 
 
    resultInput.innerText = text.value; 
 
}); 
 

 
text.addEventListener('keyup', function() { 
 
    resultKeyup.innerText = text.value; 
 
});

<input type="text" id='userInput' placeholder='enter characters here'/><hr /> 
 
<h3>On change</h3><p id="result-change"></p><hr /> 
 
<h3>On input</h3><p id="result-input"></p><hr /> 
 
<h3>On keyup</h3><p id="result-keyup"></p>

注：處理input事件是這樣的情況下更好。

。

來源

2014-11-24 06:20:24 Abhitalks

請嘗試使用KEYUP再看看裏面的值http://www.w3schools.com/jsref/event_onkeyup.asp

您可以檢查文本之前指定一個最小長度。可能不完全是你之後，但可能是一個開始

，或者您可以使用的onchange http://www.w3schools.com/jsref/event_onchange.asp

來源

2014-11-24 06:16:32

改變事件 - 只有發射時輸入失去焦點和字符串值是不同的，那麼它是前。
關鍵了 - 您可以使用鍵向上事件：

在HTML：

<元素的onkeyup = 「myScript的」 >

在JavaScript： 對象.onkeyup =函數（）{myScript的};

在JavaScript中，使用addEventListener（）方法： 對象。addEventListener（「keyup」，myScript）;

活生生的例子：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown_onkeyup

來源

2014-11-24 06:28:24

你應該儘量聽 '輸入' 事件而不是 '變'。

text = document.getElementById('userInput'); 
text.addEventListener('input', function() { console.log('hello world'); });

'keyup'也很好，但是如果你按住一個按鈕，console.logging只會在你釋放的時候纔會發生。

來源

2014-11-24 06:29:58

如何更改輸入標記對addEventListener（'change'）的響應？

回答

相關問題