如何禁用asp:ImageButton的提交行为？

Question

如何禁用asp:ImageButton的提交行为？

asp.netimagebutton

13

我在一个页面上有一个图片按钮，可以通过鼠标单击来触发它，但默认情况下也可以通过按下回车键来触发，我想禁用这个功能。

我知道在 asp:Button 中有 "UseSubmitBehaviour" 属性，那么在 asp:ImageButton 中有没有类似的方法可以实现相同的功能呢？

- Manish Basantani

我检查按钮的UseSubmitBehaviour属性，但似乎它并没有解决你的问题，是吗？ - Canavar

小心拼写。我注意到你正在使用“行为”的英式/加拿大拼写方式。当然，IntelliSense会捕捉到这个错误。 :) - Andy West

@Canavar，是的。我正在寻找ImageButton中类似的功能。 - Manish Basantani

@Andy：抱歉，我的意思是“UseSubmitBehavior”。 - Manish Basantani

@Amby：不需要道歉。只是想确保这不会给你带来任何问题。 - Andy West

asp:ImageButton继承自asp:Image而不是asp:Button，这就是为什么它不支持UseSubmitBehavior属性的原因。 - Ryan Gates

8个回答

7

如果您将内容放在 asp:Panel 中，可以使用 DefaultButton 属性将不同的按钮设置为默认按钮，这样您的图像按钮就不会被点击。

<asp:Panel runat="server" ID="pnl_Test" DefaultButton="btn_Test2">
    <asp:ImageButton runat="server" ID="btn_Test1" />
    <asp:Button runat="server" ID="btn_Test2" />
</asp:Panel>

在这个例子中，当您按下回车键时，将会点击btn_Test2，而不是通常情况下的btn_Test1。

- Josh Mein

这是一个好主意。但在我的情况下不起作用，因为我的图像按钮是另一个用户控件的一部分。所以我不能强制父控件设置DefaultButton。 - Manish Basantani

非常好。即使图像按钮在面板之前（外部），也能正常工作。 - Jaider

2

使用 Kelsey 的答案（此答案已基于 Wiki）

……但请注意一些实现时需要考虑的事项。

如果您尚未使用 jQuery，我建议使用普通的 JavaScript 方法。如果您使用该方法，请直接返回 (keynum != 13)，不要做一些愚蠢的事情，例如 if(true) return true; else return false;
您无需从代码后台分配 onkeydown。可以在标记中完成这项工作，这样做更加简洁明了。
不要禁用整个表单中的回车键。您可以仅在输入框中执行该操作，但如果在整个表单中执行该操作，则无法在文本区域中添加换行符。
如果您确实使用了 jQuery，我建议为您想要禁用的表单元素添加一个名为 "disableEnterKey" 的 CSS 类，并在文档就绪时对 $(".disableEnterKey") 调用 Kelsey 的 jQuery 方法。
即使您并不完全同意答案，也不要回答与任何人在 SO 上太相似的问题。即使答案很简单，成千上万的人可能已经做过同样的事情。这是“抄袭”。这与成为“削减者”或“告密者”类似……这很糟糕。

（此答案已基于 Wiki，因为该问题线程变得愚蠢了）

- Ben Lesh

顺便说一句，谢谢你抄袭我一天后再给我的答案点踩。你的回答和踩我的时间恰好一致...也许只是巧合吧。 - Kelsey

抱歉，我没有读完你的整篇帖子。我看到了 "if(true)return true; else return false;" 这一部分，还有你让它们从代码后端进行onkeydown赋值的事实，并认为其余的答案不值得阅读。现在我已经看过你的帖子，我的帖子类似，但这两种方法之间有一些基本的区别。例如：我建议他们在标记中添加onkeydown。我使用CSS类来找到我想用jQuery关闭的输入框。我也永远不会建议在表单内的每个地方禁用回车键，因为那会破坏文本区域的行为。 - Ben Lesh

好了，现在没事了。我会在考试中得到一个 F，因为我显然抄袭了 Stack Overflow 上最复杂和独特的算法之一。 - Ben Lesh

1

我对人们发布类似答案并没有问题（这很常见）。但如果他们这样做并且对其他正确的答案进行了投票，那么我认为这是滥用行为。 - Kelsey

1

使用asp:image代替。然后在onclick中放置一些javascript代码 "javascript:document.getElementById('imageClicked').setAttribute('value', 'true'); document.myform.submit();"。

使用javascript设置隐藏字段的值，告诉服务器端代码图像已被点击。

document.getElementById('imageClicked').setAttribute('value', 'true');

然后，在服务器处理完回发请求后，重置隐藏字段的值：

document.getElementById('imageClicked').setAttribute('value', 'true');

- TryCatch

1

表单将在按下回车键时执行页面上找到的第一个按钮。如果您可以将ImageButton向下移动，使其不再是标记中的第一个按钮，并使用CSS正确定位它，这应该可以解决您的问题。我上周也修复了完全相同的问题，这个方法对我有效。我选择了这个解决方案，因为它不需要JavaScript才能正常工作。

- Shawn Steward

0

请使用此代码。

<script type="text/javascript" language="javascript">
$(document).ready(function {
    $("#<%=imageClicked.ClientID%>").prop('disabled',true)
});
</script>

- PRADEEP SINGH Chundawat

0

你想要类似这样的东西

<form ...>

  <!-- some code here -->

  <button style='display:none' onclick='return false'>here comes the magic</button>

  <button>normal button </button>

</form>

- Dapeng

0

请查看以下链接。这可以解决所有默认按钮提交问题。 http://weblog.kevinattard.com/2011/08/aspnet-disable-submit-form-on-enter-key.html

- Phoenix Kyaw

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kelsey · Accepted Answer

我假设您有某种输入控件，并且不希望用户意外按下回车键时自动提交。如果是这样，您可以将一个JavaScript onkeypress事件附加到每个要禁用此行为的控件上。

function disableEnterKey(e)
{
     var key;
     if (window.event) key = window.event.keyCode; // Internet Explorer
     else key = e.which;

     return (key != 13);
}

// In your aspx file Page_Load do the following foreach control you want to disable
// the enter key for:
txtYourTextBox.Attributes.Add("OnKeyPress", "return disableEnterKey(event);");

如果您需要完全禁用回车键提交表单，可以在页面上使用 <body> 标签的 OnKeyDown 处理程序。

以下是 JavaScript 代码片段：

if (window.event.keyCode == 13) 
{
    event.returnValue = false; 
    event.cancel = true;
}

使用jQuery会更加简洁、容易，并且是推荐的方法。你可以使用以下代码创建一个扩展：

jQuery.fn.DisableEnterKey =
    function()
    {
        return this.each(function()
        {
            $(this).keydown(function(e)
            {
                var key = e.charCode || e.keyCode || 0;
                // return false for the enter key
                return (key != 13);
            })
        })
    };

// You can then wire it up by just adding this code for each control:
<script type="text/javascript" language="javascript">
    $('#txtYourTextBox').DisableEnterKey();
</script>