私の経験では、input type="text" onchangeイベントは通常blur、コントロールを離れた（）後にのみ発生します。
コンテンツが変更さonchangeれるたびにブラウザーを強制的にトリガーする方法はありtextfieldますか？そうでない場合、これを「手動で」追跡する最もエレガントな方法は何ですか？
onkey*フィールドを右クリックして[貼り付け]を選択できるため、イベントの使用は信頼できません。これにより、キーボード入力なしでフィールドが変更されます。
あるsetTimeout唯一の方法は？..醜い:-)
回答:
更新：
別の回答（2015）を参照してください。
2009年の元の回答：
だから、あなたがしたいonchangeのKeyDown、ぼかしの火災にイベントを、そして貼り付けますか？それは魔法です。
入力時に変更を追跡する場合は、を使用します"onkeydown"。マウスで貼り付け操作をトラップする必要がある場合は、"onpaste"（IE、FF3）および"oninput"（FF、Opera、Chrome、Safari 1）を使用してください。
1 Safariで壊れまし<textarea>た。textInput代わりに使用
onkeypressの代わりに使用する必要がありonkeydownます。onkeydownキーがクリックされたときに発生します。ユーザーがキーを押したままにすると、イベントは最初の文字に対して1回だけ発生します。onkeypressテキストフィールドに文字が追加されるたびに発生します。
onchangeこれらすべてのアクションに発砲することは、それほど魔法ではありません。 <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">ほとんどの場合、十分に機能します。
$().on('change keydown paste input', function() {})
最近は聞いていoninputます。onchange要素にフォーカスを失う必要がない ような気がします。HTML5です。
IE8以下を除くすべての人（モバイルを含む）がサポートしています。IEの場合はを追加しonpropertychangeます。私はそれを次のように使用します：
const source = document.getElementById('source');
const result = document.getElementById('result');
const inputHandler = function(e) {
result.innerHTML = e.target.value;
}
source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); <input id="source">
<div id="result"></div>oninputIE9でもサポートは部分的です（caniuse.com/#feat=input-event）。
innerTextにの代わりに使用する価値があるかもしれinnerHTMLません
以下のコードは、Jquery 1.8.3で私にとってうまくいきます
HTML： <input type="text" id="myId" />
JavaScript / JQuery：
$("#myId").on('change keydown paste input', function(){
doSomething();
});keydown入力の値を複製するので必要ありません。削除してください。
Javascriptはここでは予測不可能で面白いです。
onchange テキストボックスをぼかした場合にのみ発生しますonkeyup＆onkeypressテキストの変更時に常に発生するとは限りませんonkeydown テキストの変更時に発生します（ただし、マウスクリックではカットアンドペーストを追跡できません）onpaste＆oncutは、キーを押すだけでなく、マウスの右クリックでも発生します。したがって、テキストボックスの変更を追跡するにはonkeydown、oncutとが必要onpasteです。これらのイベントのコールバックで、テキストボックスの値を確認すると、コールバック後に値が変更されるため、更新された値を取得できません。したがって、これに対する解決策は、50ミリ秒（またはそれ以下）のタイムアウトでタイムアウト関数を設定して、変更を追跡することです。
これは汚いハックですが、私が調査したように、これが唯一の方法です。
ここに例があります。 http://jsfiddle.net/2BfGC/12/
oninputそしてtextInputこのため、実際のソリューションですが、そのすべてのブラウザでサポートされていないイベントです。
onkeyupと思いますonkeydown。どちらもCtrl、Alt、Shift、およびMetaキーをキャプチャできます。3番目の箇条書きについては、あなたが意図したものだと思いますonkeypress。
onkeyupたとえば、入力した後t、指を離したときに押すとアクションが発生しますがkeydown、アクションを実行する前に、文字をディジットしますt
これが誰かのために役立つことを願っています。
だから、onkeyupあなたは今入力した内容送信したいときのためのより良いです。
同様の要件がありました（twitterスタイルのテキストフィールド）。中古品onkeyupとonchange。onchange実際には、フィールドからフォーカスを失ったときのマウスペースト操作を処理します。
[更新] HTML5以降では、oninput上記の他の回答で説明されているように、を使用してリアルタイムの文字変更更新を取得します。
oninputを使用する方法です。私が実装された場合でも、:( HTML5は存在しなかったと我々はIE 8を持っていた、それはユーザーのために最新の情報を提供して、私はあなたの更新に感謝。。
2018年はinputイベントを利用した方がいいと思います。
-
WHATWG仕様で説明されているように（https://html.spec.whatwg.org/multipage/indices.html#event-input-input）：
ユーザーが値を変更したときにコントロールで発生します（changeイベントも参照）
-
これを使用する方法の例を次に示します。
<input type="text" oninput="handleValueChange()">Internet Explorerのみを使用している場合、これを使用できます。
<input type="text" id="myID" onpropertychange="TextChange(this)" />
<script type="text/javascript">
function TextChange(tBox) {
if(event.propertyName=='value') {
//your code here
}
}
</script>お役に立てば幸いです。
かなり近い解決策があります（すべての貼り付け方法を修正しないでください）が、それらのほとんど：
入力だけでなく、テキストエリアでも機能します。
<input type="text" ... >
<textarea ... >...</textarea>このようにしてください：
<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>私が言ったように、ペーストするすべての方法がすべてのブラウザでイベントを発生させるわけではありません...最悪の場合、まったくイベントを発生させないものもありますが、タイマーはそのように使用するのは恐ろしいです。
ただし、ほとんどの貼り付け方法はキーボードやマウスで行われるため、通常、貼り付け後にonkeyupまたはonmouseupが呼び出され、キーボードで入力するとonkeyupも呼び出されます。
コードのチェックに時間がかからないことを確認してください。そうしないと、ユーザーの理解が低下します。
はい、トリックはキーとマウスで発射することです...しかし、両方が発射される可能性があるので、そのことを覚えておいてください!!!
JQueryを使用して次のアプローチを判断してください。
HTML：
<input type="text" id="inputId" />JavaScript（JQuery）：
$("#inputId").keyup(function(){
$("#inputId").blur();
$("#inputId").focus();
});
$("#inputId").change(function(){
//do whatever you need to do on actual change of the value of the input field
});それぞれを追跡するには、この例を試してください。その前に、カーソルの点滅速度を完全にゼロに下げてください。
<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>
</body>onblur：終了時にイベントが生成されます
onchange：inputtextで変更が行われた場合、終了時にイベントが生成されます
onkeydown：キーが押されるとイベントが生成されます（長時間キーを押した場合も）
onkeyup：キーが離されるとイベントが生成されます
onkeypress：onkeydown（またはonkeyup）と同じですが、ctrl、backsace、alt otherには反応しません
ここ2018年、これは私がすることです：
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);このアプローチの欠陥を指摘していただければ幸いです。
Robert Siemer addEventListenerは、IE8ではサポートされていません。
「IEの古いバージョンでは、同等の独自仕様のEventTarget.attachEvent（）メソッドがサポートされていました。」https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener