フィールドが変更されたときのHTML/JSイベント

Question

私はC＃でのプログラミングに慣れていて、頻繁にTextBoxイベントにバインドします。たとえば、textBox.TextChangedです。これは、ユーザーまたはプログラムまたは何かがテキストボックスの内容を変更させる瞬間に発生します。

私のHTMLフォームに少し問題があります。いくつかのAJAXのことが起こっていて、いくつかのJavaScriptの検証があります。これらの事象は、ユーザーが変更を行ったときに発生する必要がありますが、特定の条件でイベントが発生するのは、です。

例えば、私は、ドロップダウンメニューがあります。

<select name="costCtr" id="costCentres" onchange="loadWorkers()"> 
    <?php echo $costCentreOptions; ?> 
</select> 

を期待される結果は時にコストセンター選択の変更、労働者が移入されるということです。これはそうではありません。ユーザーがドロップダウンメニューに移動してキーボードを使用してオプションを選択すると、何も起こりません。イベントを発生させる唯一の方法は、マウスでオプションを選択するか、キーボードでオプションを選択してからEnterを押すことです。

同様に、日付用のテキストフィールドと、その横にあるボタンで、JavaScriptベースの日付/時刻選択ツールが表示されます。ユーザーは、日付時刻ピッカーを表示するボタンをクリックし、日付を選択し、[OK]をクリックすると、日付時刻ピッカーが入力に日付文字列をドロップした場合

<input type="text" name="date" id="date" onchange="validateForm()" /> 

：少しこのようにそれを行きますフィールドでは、onchangeイベントは発生しません。実際には、onchangeイベントは、テキストを手作業で変更して入力フィールドから離れた場合にのみ発生します。

他のWeb開発者はどのようにこれらのイベントを処理しますか？どのイベントにバインドする必要がありますか？私はbody.onkeypressにバインドする必要がありますか、何かが変更され、それに応じて行動するコードを記述する必要がありますか？他のアイデア？

Answer 1

<select>要素については、私はいつものように、onchangeと一緒にonkeyupを使用しています。テキストフィールドの

ユーザーがフィールドを離れるしようとしたときに検証したい場合は、もう一度同じように、ユーザーの種類として入力を検証したい場合はonkeyupを使用するか、またはonblurことができます。

<input type="text" name="date" id="date" onkeyup="validateCurrentFieldValue()" /> 

...または：スクリプト日付ピッカーで使用されているテキストフィールドの

<input type="text" name="date" id="date" onblur="validateForm()" /> 

、選択イベントをキャプチャするための最良の方法は、あなたの日付ピッカーのスクリプトに依存します。ピッカーからのonchange/onselectionイベントのキャプチャについて、そのドキュメントを確認する必要があります。

Answer 2

キーボードナビゲーションに対応するには、キー押し/キーアップイベントを追加する必要があります。

日付ピッカーの場合は、日付ピッカーの終了時にイベントを発生させます。適切にキーボードを使用して行われた変更を取得しますどの...

<select name="costCtr" id="costCentres" onchange="loadWorkers()" onkeyup="this.onchange()"> 
    <?php echo $costCentreOptions; ?> 
</select> 

：