2009-10-13 6 views
12

J'ai un bouton d'image dans une page qui peut être déclenchée sur un clic de souris, par défaut, il est déclenché sur appuyez sur Entrée que je veux désactiver.Comment désactiver le comportement d'envoi d'asp: ImageButton?

Je connais l'attribut "UseSubmitBehaviour" dans asp: Button, est-il possible de faire la même chose dans asp: ImageButton?

+0

Je vérifie UseSubmitBehaviour propriété de bouton, mais il semble que cela ne résout pas votre problème (pour le bouton), il fait? – Canavar

+0

Faites attention à l'orthographe. J'ai remarqué que vous utilisez l'orthographe britannique du mot «comportement». Bien sûr, IntelliSense va attraper ça. :) –

+0

@Canavar, oui c'est le cas. Je suis à la recherche d'une fonctionnalité similaire dans ImageButton. –

Répondre

11

Je suppose que vous avez un certain type de contrôles de saisie et que vous ne voulez pas qu'une touche d'entrée soit automatiquement envoyée lorsqu'un accident d'utilisateur frappe la touche d'entrée. Si c'est le cas, vous pouvez attacher un événement javascript onkeypress à chaque contrôle pour lequel vous voulez désactiver ce comportement.

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);"); 

Si vous devez désactiver complètement le formulaire de soumission de la touche Entrée. cas, utilisez le gestionnaire OnKeyDown sur <body> sur votre page.

Le code javascript:

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

Avec JQuery ce serait beaucoup plus propre, plus facile et la méthode recommandée. Vous pouvez effectuer une extension avec:

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> 
+0

J'ai essayé cette approche. asp: imagebutton ne semble pas gérer l'événement onKeyPress côté client.

+0

L'implémentation d'OnKeyPress comme vous avez fait l'événement secondaire SERVER. Vous devez le connecter avec javascript. Je vais éditer ma réponse pour le montrer correctement. – Kelsey

+1

Si vous placez la fonction disableEnterKey dans l'événement onkeydown de la balise body, l'utilisateur ne pourra pas ajouter de retour chariot à une zone de texte multiligne. Aussi c'est un peu drôle: if (key == 13) return false; sinon retour vrai; –

1

Utilisez une asp: image à la place. Puis placez du code javascript dans le onclick "javascript:document.getElementById('imageClicked').setAttribute('value', 'true'); document.myform.submit();"

Définissez la valeur d'un champ caché (en utilisant javascript) pour indiquer au code côté serveur que l'image a été cliquée.

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

Puis, à la fin de la manipulation du postback sur le serveur réinitialiser la valeur du hiddenField:

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

Pouvez-vous élaborer s'il vous plaît? –

2

Réponse Utilisons Kelsey (Cette réponse est wiki'ed)

.. .mais s'il vous plaît noter quelques petites choses lorsque vous l'appliquez.

  1. Je recommande l'ancienne méthode javascript si vous n'utilisez pas déjà jQuery. si vous faites cette méthode, juste retour (keynum! = 13) ne faites pas quelque chose de stupide comme si (true) renvoie true; sinon, retournez faux;

  2. Vous n'avez pas besoin d'affecter onkeydown du code derrière. Cela peut être fait dans le balisage et c'est beaucoup plus propre quand vous le faites. Ne désactivez pas la touche d'entrée dans votre formulaire entier. Vous pouvez le faire uniquement dans vos entrées, mais si vous le faites dans le formulaire entier, vous ne pourrez pas ajouter de retour chariot dans une zone de texte. Si vous utilisez jQuery, je vous recommande d'ajouter une classe CSS nommée "disableEnterKey" et de l'assigner à vos éléments de formulaire que vous voulez désactiver, puis d'appeler la méthode jQuery de Kelsey sur $ (". DisableEnterKey") dans le document prêt. Ne répondez pas trop similaire à n'importe qui sur SO, même si vous n'êtes pas entièrement d'accord avec la réponse. Et même si la réponse était simple et que des milliers de personnes ont probablement fait quelque chose. C'est "copier". Ce qui est similaire à être un "cutter" ou un "tattle tale" ... ce qui est mauvais.

(cette réponse a été la communauté wiki'ed que ce fil de question a obtenu stupide)

+0

Btw merci d'avoir copié ma réponse un jour de retard puis de voter ma réponse. Le vote vers le bas était au moment exact où vous avez posté votre réponse ... peut-être juste une coïncidence. – Kelsey

+0

Désolé, je n'ai jamais lu votre publication en entier. J'ai vu le "si (vrai) retour vrai, sinon retourner faux"; peu et le fait que vous les avez assigné onkeydown du code derrière et a figuré le reste de la réponse ne valait pas la peine d'être lu. Maintenant que j'ai lu votre message, mon message est similaire, mais il existe quelques différences fondamentales entre les deux méthodes. Par exemple: je suggère qu'ils ajoutent l'onkeydown dans le balisage. J'utilise une classe css pour trouver les entrées que je veux tuer avec jQuery. Je ne recommanderais jamais non plus de désactiver la touche enter à l'intérieur d'un formulaire, car cela perturberait le comportement de textarea. –

+0

Là, tout va mieux. Je vais prendre un F sur le test, car j'ai copié clairement l'un des algorithmes les plus complexes et uniques que SO ait jamais vu. –

2

Le formulaire exécutera le premier bouton qu'il trouve sur la page lorsque vous appuyez sur Entrée. Si vous pouvez déplacer le ImageButton plus bas sur la page afin que ce ne soit plus le premier bouton du balisage, et que vous utilisiez CSS pour le positionner correctement, ceci devrait résoudre votre problème. J'ai corrigé exactement la même chose la semaine dernière et cela a fonctionné pour moi. Je suis allé avec cette solution, car il ne nécessite pas JavaScript pour fonctionner correctement.

7

Si vous mettez votre contenu dans un asp: Panel vous pouvez utiliser le DefaultButton propriétés pour définir un autre bouton par défaut de sorte que votre bouton d'image ne sera pas cliqué.

<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> 

Dans cet exemple, le btn_Test2 sera cliqué lorsque vous appuyez sur Entrée où normalement btn_Test1 serait cliqué

+0

C'est une bonne idée. Mais ne fonctionnera pas dans mon cas, puisque mon bouton d'image fait partie d'un autre contrôle utilisateur. Donc, je ne peux pas forcer les contrôles parents pour définir le DefaultButton. –

+0

Excellent. Même travailler si le bouton Image est devant (à l'extérieur) du panneau. – Jaider

1

vous voulez quelque chose comme

<form ...> 

    <!-- some code here --> 

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

    <button>normal button </button> 

</form> 
0

S'il vous plaît utiliser ce code

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