我在使用带有onserverclick属性的html按钮时遇到了一些非常奇怪的行为。我要做的是使用jquery指定页面上的默认按钮。默认情况下,我指的是当用户点击enter时被“点击”的按钮。在测试中,我会在输入字段中按enter键,有时会单击预期的“默认”按钮,然后单击相应onserverclick属性中定义的服务器端方法。其他情况下,回发邮件时不使用服务器方法。为了隔离这个问题,我创建了一个最小的测试用例,并发现了一些非常有趣的结果。
客户端:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="/scripts/jquery-1.4.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="_response" runat="server"></asp:Label>
<input id="input1" type="text" />
<input id="input2" type="text" />
<button id="first" type="button" class="defaultBtn" runat="server" onserverclick="ServerMethod1">test1</button>
<button id="second" type="button" runat="server" onserverclick="ServerMethod2">test2</button>
</form>
<script type="text/javascript">
jQuery('form input').keyup(
function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button.defaultBtn').click();
return true;
}
}
);
</script>
</body>
</html>
服务器端:
public partial class admin_spikes_ButtonSubmitTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ServerMethod1(object sender, EventArgs e)
{
_response.Text = "server method1 was hit";
}
protected void ServerMethod2(object sender, EventArgs e)
{
_response.Text = "server method2 was hit";
}
}
我发现,除了删除了一个输入元素之外,这段代码的一切都按预期工作。在firefox 3.6和ie 8中,当页面上只存在一个输入时,点击enter并不会触发onserverclick,它甚至不会被jquery“点击”或实际“点击”而返回一个post。您可以从两个输入开始并单击“test2”来测试这一点。这将输出“服务器方法2已命中”。然后按enter键,输出将是“server method1 was hit”。现在去掉一个输入并运行相同的测试。单击“test2”查看结果,然后单击enter,您将看到不会有任何更改,因为“test1”方法从未被命中。有人知道怎么回事吗?
谢谢
P.S.铬按预期工作
