Question

我想在页面上显示/隐藏元素，具体取决于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';
    }
}

提前致谢。

Answer 1

编辑：你的代码不起作用，因为showMoreInfo(x)函数假定x参数将是对一个或另一个单选按钮的引用，但是你的文本输入是onchange / onkeyup /无论什么事件调用相同的函数和传递给自己的引用 - 这就是为什么它只在你单击单选按钮时有效。您可以尝试使用以下内容，让函数自己对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。

但是，请记住，有几种方法可以让用户在不使用键盘的情况下更改输入中的值（因此没有onkeyup），例如，拖放到输入（拖出将改变焦点，但如果你不再使用onchange ......）。或者右键单击上下文菜单 - 粘贴，剪切或删除。副手我不知道最简单的方法是满足这些要求（我不需要担心，因为我不喜欢页面上的内容随着用户在字段中输入而改变而我通常只需要{ {1}}专门检查输入键），但是您可以查看onpaste和ondrop事件。

Answer 2

最有可能的答案是文本字段的onchange only fires when you blur from it。单击文本字段以外的任何位置都应触发事件。

您可以改为使用onkeyup。

Answer 3

onkeypress或onkeyup是侦听文本输入字段更改的正确事件。按下或按住时onkeypress会触发，而释放按键后onkeyup会触发

如何触发依赖于满足特定条件的2个表单输入的事件？

3 个答案: