1

いくつかのラジオ ボタンを含む HTML フォームがあります。最初のいくつかは通常のラジオですが、最後のものはテキスト ボックスに関連付けられています。テキストボックスを使用して値を提供せずに「その他」を選択したときにユーザーに警告するために、JavaScript 検証を実行したいと思います。

機能的な HTML + JS は以下にリンクされていますが、HTML の大まかな概要は次のとおりです。

<ul>
    <li>
        <input type="radio"/> foo
    </li>
    <li>
        <input type="radio"/> bar
    </li>
    <li>
        <input type="radio"/> other, please specify:
        <input type="text"/> <span class="error">please provide a value</span>
    </li>
</ul>

その他のラジオがチェックされているときにテキスト ボックスにフォーカスするための JavaScript がいくつかあり、その逆も同様です。

問題

検証を希望どおりに機能させるために、どのイベントにフックすればよいかわかりません。

私が問題を抱えているテストケース:

  1. この一連のアクションで警告が表示されることはありません。
    1. Foo ラジオが選択された状態で開始し、テキストボックスにテキストはありません。
    2. テキスト ボックスにフォーカスを与えます (たとえば、クリックします)。その他のラジオは自動的にチェックされます。
    3. Fooラジオを選択
  2. ステップ 3 を実行すると、最初に警告が表示されます。
    1. Foo ラジオが選択された状態で開始し、テキストボックスにテキストはありません。
    2. テキスト ボックスにフォーカスを与えます (たとえば、クリックします)。その他のラジオは自動的にチェックされます。
    3. テキスト ボックスに入力せずに、フォームの残りの部分に進みます (つまり、他の何かにフォーカスを移します)。

私が試したこと

  1. テキスト ボックスのblur (またはchange ) イベントの検証。ケース 1 のステップ 3 で警告が点滅します。これは、Foo ラジオが選択される前にぼかしが発生するためです。

  2. ul のblurイベントの検証: 1 つもありません。

  3. テキスト ボックスのblurイベントに、ドキュメントのmouseupイベントのハンドラーを追加します。マウスアップで、ハンドラーを検証して削除します。これは、ケース 2 のステップ 3 でフォーカスが失われた原因が別の場所をクリックした場合に機能します。フォーカスの喪失がキーボードによって引き起こされた場合、またはタブでウィンドウから離れた場合には機能しません。または、複数のマウス クリックが時間的に重なる場合。これらを修正すると、物事が非常に複雑になるようです。

  4. テキスト ボックスのblursetIntervalを処理し、検証を呼び出すために使用します。遅延に適した値が見つかりません。短すぎると、マウスのクリックが遅いとちらつきが発生することを意味し、長すぎると、検証がぼやけの原因となったアクションに関連付けられていないように見えることを意味します。

4

1 に答える 1

0

他のオプションに含まれるliでonmouseoutイベントを使用するのはどうですか? そのイベントを使用する際の問題は、ネストされた要素があり、onmouseoutイベント ハンドラーを親要素に追加すると、マウス ポインターが子要素の上に置かれたときにブラウザーがonmouseoutイベントをトリガーすることですが、この種の問題を解決するスクリプトがあります。

于 2009-11-17T21:25:16.293 に答える