如何触发依赖于满足特定条件的2个表单输入的事件？
我想根据两个表单输入是否匹配来显示/隐藏页面上的元素。所以在这个例子中，如果一个文本字段大于100000并且一个单选按钮有一个特定值，那么这些元素就会显示出来。如果仍选择了正确的单选，但数值降至100000以下，则元素将隐藏。(这段代码是一个更大的脚本的一部分，以防它没有意义)。
它在很大程度上是有效的，但是当与单选值onclick事件一起使用时，文本字段的onchange/onkeyup事件不会自动触发。我必须重新单击更改后的文本字段值的单选按钮才能触发事件。(而且这不是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';
}
}提前谢谢。
回答 3
Stack Overflow用户
发布于 2011-05-20 12:26:21
编辑:您的代码不能工作，因为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';
}
}不过，我最初关于键盘事件不足的观点仍然成立。
我最初的回答是：
正如温布尔顿所说，只有当焦点离开字段时，onchange才会发生-这就是为什么在您的示例中，单击单选按钮会导致onchange发生。因此，正如已经说过的，您可以使用onkeyup而不是onchange。
但是，请记住，用户有几种方法可以在不使用键盘的情况下更改输入中的值(因此没有onkeyup)，例如，拖放到输入上(向外拖动将更改焦点，但如果您不再使用onchange ...)。或者右键单击-上下文-菜单-粘贴、剪切或删除。顺便说一下，我不确定满足这些需求的最简单方法是什么(我不需要担心，因为我不喜欢页面上的内容随着用户在字段中键入而发生变化，而且我通常只需要onkeyup来专门检查enter键)，但您可以查看onpaste和ondrop事件。
Stack Overflow用户
发布于 2011-05-20 07:46:25
最有可能的答案是textfield的onchange only fires when you blur from it。单击文本字段以外的任何位置都应触发事件。
您可以改用onkeyup。
Stack Overflow用户
发布于 2011-05-20 07:54:02
onkeypress或onkeyup是监听文本输入字段更改的正确事件。onkeypress在按下或按住时触发，而onkeyup在释放键后触发
https://stackoverflow.com/questions/6066048
复制相似问题
腾讯云开发者
