Here is a JSFiddle snippet说明了这个问题。
在表单中,我在隐藏的image
中输入了div
类型的输入。隐藏的div
有一个click
事件触发警报(附带jQuery)。我在同一个表单中也有一个基本的文本输入。
在Chrome上,当我在文本输入中按Enter键时,没有任何反应。在Firefox上,触发警报,这意味着Firefox会在隐藏的div上触发click事件。
哪些Chrome和Firefox实现了正确的行为,以及如何在浏览器上解决此问题?
答案 0 :(得分:4)
点击输入表单中的单个文本输入提交表单。它通过在某些情况下触发click事件来实现。
在Firefox中,它似乎在窗体的默认提交控件上触发了一个click事件,无论该控件是什么(并且图像输入可以是默认的提交控件)。
在Chrome中它也会这样做,但前提是默认的提交控件有一个CSS框(这就是display:none
在Chrome中很重要的原因)。
根据http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#implicit-submission的规范,此处不应该依赖CSS:无论如何都会运行合成点击激活步骤,因此Chrome的行为肯定是错误的。
对于Firefox,问题是图像输入是否是“提交按钮”。 http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#image-button-state-%28type=image%29说实际上是,所以在这种情况下Firefox行为是正确的。
就变通方法而言,如果您不希望它提交表单,一种可能的选择是在图像输入上显式设置form=""
,这将使其与表单无关,因此不是默认提交它的按钮。
答案 1 :(得分:0)
我不确定你要用输入的图像输入来完成什么。根据我通过Google找到的内容(包括此SO question),图像输入应该像提交按钮一样运行。如果它应该像提交按钮一样运行,那么我会假设按下表单上的输入将提交它(因此在FF中的点击事件)。但是,隐藏按钮时是否应该这样做?虽然我没有时间研究它,但它似乎是浏览器实现的选择。
就解决方法而言,它取决于你想要做什么(如果输入类型图像真的是正确的方法)。