html <input type =“ text” /> onchangeイベントが機能しない

私はいくつかの実験をしようとしています。私がしたいのは、ユーザーがテキストボックスに何かを入力するたびに、それがダイアログボックスに表示されることです。onchangeイベントプロパティを使用してそれを実現しましたが、機能しません。それを機能させるには、送信ボタンを押す必要があります。私はAJAXについて読み、これについて学ぶことを考えています。それを機能させるにはまだAJAXが必要ですか、それとも単純なJavaScriptで十分ですか？助けてください。

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangeコントロールがぼやけている場合にのみトリガーされます。onkeypress代わりに試してください。

.on('input'...jQuery 1.7以降からの入力（貼り付け、キーアップなど）へのすべての変更を監視するために使用します。

静的および動的入力の場合：

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

静的入力の場合のみ：

$('.my-class').on('input', function(){
    alert('Input changed');
});

静的/動的な例を使用したJSFiddle：https：//jsfiddle.net/op0zqrgy/7/

マウスクリックを使用して入力フィールドの内容を変更できるため、キーストロークのチェックは部分的な解決策にすぎません。テキストフィールドを右クリックすると、キーストロークを行わずに値を変更するために使用できるカットアンドペーストオプションがあります。同様に、オートコンプリートが有効になっている場合は、フィールドを左クリックして、以前に入力したテキストのドロップダウンを取得し、マウスクリックを使用して選択肢の中から選択できます。キーストロークトラッピングは、これらのタイプの変更のいずれも検出しません。

残念ながら、少なくとも私が知る限り、変更をすぐに報告する「onchange」イベントはありません。ただし、すべての場合に機能する解決策があります。setInterval（）を使用してタイミングイベントを設定します。

入力フィールドのIDと名前が「city」であるとします。

<input type="text" name="city" id="city" />

「city」という名前のグローバル変数があります。

var city = "";

これをページの初期化に追加します。

setInterval(lookForCityChange, 100);

次に、lookForCityChange（）関数を定義します。

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

この例では、「city」の値は100ミリ秒ごとにチェックされ、必要に応じて調整できます。必要に応じて、lookForCityChange（）を定義する代わりに無名関数を使用してください。コードまたはブラウザでさえ入力フィールドの初期値を提供する可能性があるため、ユーザーが何かを行う前に「変更」が通知される可能性があることに注意してください。必要に応じてコードを調整します。

10分の1秒ごとにタイミングイベントがオフになるという考えがうまくいかない場合は、入力フィールドがフォーカスを受け取ったときにタイマーを開始し、ぼかし時に（clearInterval（）を使用して）タイマーを終了できます。フォーカスを受け取らずに入力フィールドの値を変更することはできないと思うので、この方法でタイマーのオンとオフを切り替えるのは安全なはずです。

HTML5は、oninputすべての直接的な変更をキャッチするイベントを定義します。わたしにはできる。

onchange 入力要素への変更がユーザーによってコミットされた場合にのみ発生します。ほとんどの場合、これは要素がフォーカスを失ったときです。

要素の値が変更されるたびに関数を起動する場合は、oninputイベントを使用する必要があります。これは、ユーザーのマウスで値を変更できるため、キーのアップ/ダウンイベントよりも優れています。つまり、貼り付けや自動入力などです。

変更イベントの詳細については、こちらをご覧ください

入力イベントの詳細については、こちらをご覧ください

「onchange」の代わりに次のイベントを使用する

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

まず、「機能しない」とは何ですか？アラートが表示されませんか？

また、あなたのコードはこれに単純化することができます

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Safariがテキスト入力フィールドで「onchange」イベントを発生させないという問題が発生しました。jQuery 1.7.2の「変更」イベントを使用しましたが、どちらも機能しませんでした。結局、ZURBのtextchangeイベントを使用しました。これはmouseeventsで機能し、フィールドを離れることなく起動できます：http：//www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

IMOが重要であるといういくつかのコメント：

• USERアクションENTERまたはblurawaitが正しい動作になるまで、入力要素が「change」イベントを発行しない。

• 使用したいイベントは"input"（ " oninput "）です。ここでは、2つの違いがよく示されています：https：//javascript.info/events-change-input

• 2つのイベントは、2つの異なるユーザージェスチャ/モーメントを通知します（「入力」イベントは、ユーザーが選択リストオプションを記述またはナビゲートしているが、変更を確認しなかったことを意味します。「変更」は、ユーザーが値を変更したことを意味します（入力またはぼかしを使用）私たちの）

• この場合、ここで推奨されている多くのような重要なイベントを聞くことは悪い習慣です。（入力に対するENTERのデフォルトの動作を変更する人のように）...

• jQueryはこれとは何の関係もありません。これはすべてHTML標準です。

• これが正しい動作である理由を理解するのに問題がある場合は、おそらく役立つでしょう。実験として、マウス/パッドなしで、キーボードだけでテキストエディタまたはブラウザを使用してください。

私の2セント。

onkeyupは私のために働いた。スペースを押し戻すときにonkeypressはトリガーされません。

とonchange(event)一緒に使用することをお勧めします<select>。では<input>、あなたのイベントの下に使用することができます。

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

試してみてくださいonpropertychange。IEでのみ機能します。