HTML Hidden 控件是否有任何事件？像 onchange 什么的？答案

【问题标题】：Does HTML Hidden control have any events? Like onchange or something?HTML Hidden 控件是否有任何事件？像 onchange 什么的？
【发布时间】：2010-11-03 10:26:18
【问题描述】：

我可以将任何事件处理程序附加到 HTML 隐藏输入字段吗？基本上我想在隐藏的输入字段值更改时运行一个函数。

【问题讨论】：

你的意思是 HTML type="hidden" 吗？
你的意思是一个被 CSS display:none 隐藏的 HTML 表单元素吗？

标签： javascript html dom

【解决方案1】：

是的，某些浏览器（例如 Firefox）会在隐藏元素通过 accesskey 属性激活时触发 onclick 或 onfocus 事件（旨在提供键盘热键以跳转到输入） .

在 Firefox 中打开下面的内容，聚焦框架，然后按 Alt+Shift+x（Windows 和 Linux）或 Ctrl+Alt+x (Mac)。

&lt;input type="hidden" accesskey="x" onclick="alert('clicked!');" /&gt;

【讨论】：

【解决方案2】：

JavaScript 具有元素的焦点事件。共有三个焦点事件：focus、focusin 和 focusout。

我发现当元素显示状态同时改变为块和无时会触发focusout，而focusin仅触发块的显示状态。

document.getElementById('element_id').addEventListener('focusout',function(e){
    if (this.style.display === "none") {
       // perform operations when the element is hidden, like clear fields, etc.
    } else {
       // perform operations when the element is displayed, like populate fields
    }
});

【讨论】：

【解决方案3】：

事件仅在用户在浏览器中执行事件时触发，因此如果它是 <input type="hidden"> 或被 CSS 隐藏的 <input>，用户将无法触发事件到您的输入。

让 onchange 起作用的唯一方法是在 Javascript 中手动触发 onchange。一个简单的例子：

<form name="f" onsubmit="document.f.h.value='1'; 
                         document.f.h.onchange(); 
                         return false;"
>
    <input type="hidden" name="h" value="0" onchange="alert(document.f.h.value);" />
    <input type="submit" />
</form>

【讨论】：

好主意，但我不得不使用 onkeyup 代替，因为 onchange 才能让它工作。
从代码中某个奇怪的地方调用事件处理程序是一种难以形容的糟糕编码习惯