2

2つのフォーム入力が一致するかどうかに応じて、ページ上の要素を表示/非表示にします。したがって、この例では、テキストフィールドが100000より大きく、ラジオボタンに特定の値がある場合、その要素が表示されます。正しい無線がまだ選択されているが、数値が100000を下回る場合、要素は非表示になります。（このコードは、意味がない場合に備えて、はるかに大きなスクリプトの一部です）。

ほとんどの場合は機能しますが、ラジオ値イベントとともに使用すると、テキストフィールドのonchange/onkeyupイベントはそれ自体では発生しませんonclick。イベントを発生させるには、変更されたテキストフィールド値のラジオボタンを再度クリックする必要があります。（そして、それはonblur問題ではありません。onchangeそれ自体では正常に機能しますが、論理&&演算子では機能しません。）

    <li id="f-container-applicant-bondamount">
        <label for="f-applicant-bondamount">Amount of Bond</label>
        <input type="text" name="ApplicantBondAmount" id="f-applicant-bondamount" onkeypress="showMoreInfo(this);" />
    </li>

    <li id="f-container-applicant-is"> 
        <label for="f-applicant-is">Applicant is...</label> 
            <ul>
                <li>
                    <label for="f-applicant-is_0">
                    <input type="radio" name="ApplicantIs" id="f-applicant-is_0" value="Administrator" onclick="showMoreInfo(this);" />
                    Administrator
                    </label>
                </li>
                <li>
                    <label for="f-applicant-is_1">
                    <input type="radio" name="ApplicantIs" id="f-applicant-is_1" value="Executor" onclick="showMoreInfo(this);" />
                    Executor
                    </label>
                </li>
            </ul>
        </label>
    </li>

    <li id="f-container-applicant-moreinfo">
        <label for="f-applicant-moreinfo">More Info</label>
        <input type="text" name="ApplicantMoreInfo" id="f-applicant-moreinfo" />
    </li>




function showMoreInfo(x) {
    var bond = document.getElementById('f-applicant-bondamount');
    var y = bond.value;

    if (y > 100000 && x.value == "Administrator")  {
        document.getElementById('f-container-applicant-moreinfo').style.display = 'block';      
    }
    else if (y <= 100000 && x.value == "Administrator") {
        document.getElementById('f-container-applicant-moreinfo').style.display = 'none';
    }
}

前もって感謝します。

4

3 に答える 3

1

編集:関数は x パラメータがいずれかのラジオ ボタンへの参照であると想定しているため、コードは機能しませんshowMoreInfo(x)が、テキスト入力の onchange/onkeyup/whatever イベントは同じ関数を呼び出して、それ自体への参照 - これが、ラジオ ボタンをクリックしたときにのみ機能する理由です。代わりに次のようなことを試して、HTML 要素を渡すのではなく、関数が HTML 要素への独自の参照を処理できるようにすることができます。

function showMoreInfo() {
   var bond = document.getElementById('f-applicant-bondamount');
   var adminRadio = document.getElementById('f-applicant-is_0');
   // var theOtherRadioIfYouNeedIt = document.getElementById('f-applicant-is_1');

   var y = bond.value;

   if (y > 100000 && adminRadio.checked) {
      document.getElementById('f-container-applicant-moreinfo').style.display = 'block';
   }
   else if (y <= 100000 && adminRadio.checked) {
      document.getElementById('f-container-applicant-moreinfo').style.display = 'none';
   }
}

キーボードイベントが不十分であるという私の最初のポイントはまだ残っています。

私の元の答え：

ウォンブルトンが言っonchangeたように、フォーカスがフィールドを離れたときにのみ発生します。これが、例でラジオボタンをクリックするとonchange発生する理由です。すでに述べたようonkeyupに、 の代わりに使用できますonchange。

ただし、ユーザーがキーボードを使用せずに入力の値を変更できる方法がいくつかあることを覚えておいてください (したがって、できませんonkeyup)。たとえば、入力にドラッグ アンド ドロップします (ドラッグ アウトするとフォーカスが変更されますが、もう使わonchangeない…）。または、右クリック コンテキスト メニューの貼り付け、切り取り、または削除。これらに対応する最も簡単な方法が何であるかはわかりません（ユーザーがフィールド内で入力するときにページ上の内容が変化するのは好きではないので、心配する必要はありません。通常、必要なonkeyupのは特にEnterキーを確認してください）が、調べることができるonpasteおよびondropイベントがあります。

于 2011-05-20T04:26:20.570 に答える
0

最も可能性の高い答えは、テキストフィールドonchange からぼかした場合にのみテキストフィールドが起動するというものです。テキストフィールド以外の場所をクリックすると、イベントがトリガーされます。

代わりに使用できますonkeyup。

于 2011-05-19T23:46:24.570 に答える
0

onkeypress または onkeyup は、テキスト入力フィールドへの変更をリッスンする正しいイベントです。onkeypress はキーを押したままにすると起動し、onkeyup はキーを離した後に起動します

于 2011-05-19T23:54:01.850 に答える