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

编辑：您的代码不起作用，因为该showMoreInfo(x)函数假定 x 参数将是对一个或另一个单选按钮的引用，但是您的文本输入的 onchange/onkeyup/whatever 事件正在调用相同的函数并传入一个对自身的引用——这就是为什么它只在您单击单选按钮时才起作用的原因。您可以尝试以下类似的方法，让该函数自己计算出对您的 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';
   }
}

我最初关于键盘事件不足的观点仍然存在。

我原来的答案：

正如 wombleton 所说，onchange仅当焦点离开该字段时才会发生 - 这就是为什么在您的示例中单击单选按钮会onchange发生这种情况。正如已经说过的那样，您可以使用onkeyup而不是onchange.

但是，请记住，用户可以通过多种方式在不使用键盘的情况下更改输入中的值（因此 no 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 回答