按Enter时,onClick不会仅触发一个输入

时间:2020-03-05 18:39:17  来源:igfitidea点击:

我在Internet Explorer 7中遇到问题。

当我有一个带有两个或者多个input [type = text]的表单并按Enter时,事件按以下顺序发生:

  • 提交按钮(onClick)
  • 表格(onSubmit)

样例代码:

<form onSubmit="{alert('form::onSubmit'); return false;}">
    <input type="text">
    <input type="text">
    <input type="submit" onClick="{alert('button::onClick');}">
</form>

如果我只有一个input [type = text],然后按Enter键,则不会触发onClick事件。样例代码:

<form onSubmit="{alert('form::onSubmit'); return false;}">
    <input type="text">
    <input type="submit" onClick="{alert('button::onClick');}">
</form>

解决方案

回答

如果要让代码在用户按下Enter时运行,则只需使用onSubmit处理函数即可。

如果要让代码在用户按下按钮时运行,而不是在用户按下Enter键时运行,请使用type =" submit"以外的按钮。

回答

该按钮的onclick(我认为)应该仅在该按钮实际被单击时(或者当焦点位于该按钮上并且用户单击Enter时)才触发,除非我们已添加逻辑来更改该按钮。

额外的文本框的添加是否可能会更改元素的选项卡顺序(在这种情况下,可能使按钮成为默认控件)?

回答

有趣的是,如果我们在只有一个文本框的第二个示例上单击屏幕(从文本框移出焦点),则会触发onClick事件……因此这不是预期的行为,因为仅当我们只有一个文本框并且我们有将重点放在文本框上。
恐怕我们在浏览器中发现了一个错误,我们将不得不找到一种解决方法,或者在这种情况下避免使用onClick事件。
我使用onSubmit事件进行验证,因为这是一个"更安全"的事件,更有可能在不同的浏览器和情况下起作用。

回答

出于好奇,我们使用的是DOCTYPE,如果使用的是DOCTYPE?我并不是说与DOCTYPE不兼容是问题,但是在尝试其他任何方法之前,请先排除怪癖模式。

回答

从浏览器诞生之初,表单中的单个输入字段将在有或者没有提交按钮的情况下在回车时提交。这是为了使人们更容易从单个搜索字段中搜索站点。

如果我们需要在表单中执行某些javascript,则使用表单的onsubmit(并返回false以停止提交)是一种安全的做法,而不是在Submit按钮的onClick中执行脚本。如果我们需要通过按钮执行javascript,请使用type =" button"而不是type =" submit"希望这可以澄清我的意思