comment supprimer le focus par défaut sur le bouton Envoyer au format HTML?

Question

J'ai un formulaire HTML sur ma page. Lorsque je mets de la valeur dans l'un des champs de texte dans le formulaire et que j'appuie sur la touche "Entrée", le formulaire est envoyé instantanément. Je pense que cela se produit en raison de l'accent par défaut est sur le bouton soumettre. Mais j'essaye d'enlever cette focalisation en utilisant la fonction de blur(), elle ne fonctionne pas. J'utilise Chrome. Y a-t-il un moyen d'éviter ce scénario? Toutes les suggestions sont les bienvenues. Merci d'avance.

Answer 1

blur() est le chemin à parcourir. Cela fonctionne comme ceci:

<button onclick="this.blur();">some button</button> 

Notez que vous ne devez pas utiliser les événements JavaScript et DOM en utilisant les attributs. Ceci est juste à des fins de démonstration. Essayez d'être discret.

Answer 2

Le bouton Envoyer n'est pas réellement mis au point; Entrez dans un champ de texte est censé soumettre le formulaire.

Vous pouvez enregistrer un gestionnaire pour l'événement submit, puis ne l'autoriser que si le bouton Soumettre était réellement ciblé au moment où l'envoi a été demandé. Cependant, vous allez sciemment rompre le fonctionnement des formulaires HTML. Tout le monde ne veut pas soumettre le formulaire en utilisant la méthode One True Way en cliquant sur le bouton Submit (également, vous allez briser l'accessibilité et introduire des bogues spécifiques au navigateur).

Answer 3

Non. Le focus est toujours sur le champ de texte. En appuyant sur Entrée, il est supposé soumettre le formulaire (et contourne entièrement le bouton de soumission).

Vous pouvez suppress the behavior using JavaScript, mais puisque c'est un comportement normal pour le navigateur, je ne le recommanderais pas.

Answer 4

Peut-être que cela vous aidera, le formulaire est supposé être envoyé avec enter dans la zone de texte (HTML par conception), ce n'est pas une question de mise au point.

Si vous voulez l'éviter, vérifiez this.

Voici le script proposé:

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

    return (key != 13); 
} 

Bonne chance, dites-moi si vous avez besoin d'éclaircissements!

EDIT: Je suis d'accord avec Piskvor answer, il peut apporter quelques bugs

Answer 5

cela n'a rien à voir avec la mise au point, est juste le comportement par défaut de vous du navigateur.Pour éviter cela, vous pouvez essayer de cath l'entrer-keypress comme celui-ci (Source - mais il y a un lot of other solutions (la plupart travaillent de la même manière, tout en utilisant d'autres événements comme les entreprises onsubmit au lieu des documents OnKeyPress)):

function catchEnter(e){ 
     // Catch IE’s window.event if the 
     // ‘e’ variable is null. 
     // FireFox and others populate the 
     // e variable automagically. 

     if (!e) e = window.event; 
     // Catch the keyCode into a variable. 
     // IE = keyCode, DOM = which. 
     var code = (e.keyCode) ? e.keyCode : e.which; 

     // If code = 13 (enter) or 3 (return), 
     // cancel it out; else keep going and 
     // process the key. 

     if (code == 13 || code == 3) 
     return false; 
     else 
     return true; 
} 


// Anonymous method to push the onkeypress 
// onto the document. 
// You could finegrain this by 
// document.formName.onkeypress or even on a control. 
window.onload = function() { document.onkeypress = catchEnter; }; 

Answer 6

essayez d'ajouter l'événement keypress de votre bouton cette fonction javascript:

function ButtonKeyPress() 
{ 

    var code = (window.event.which) ? window.event.which : window.event.keyCode; 

    if (code == 13) 
    { 
    event.returnValue = false; 
    return false; 
    } 

    return true; 

} 

Answer 7

Change:

<input type="text" ... > 

pour:

<textarea ... ></textarea> 

Vous devrez peut-être jouer un peu avec les attributs, je les ai laissés signifiés comme ....

Answer 8

Donc, vous avez un formulaire. Dans ce formulaire, vous avez une entrée de texte et un bouton d'envoi. Vous obtenez dans la saisie de texte, vous tapez du texte, que vous appuyez sur "Entrée". Cela soumet le formulaire. Vous souhaitez rompre ce comportement normal.

Je pense que ce n'est pas une bonne idée: La convention dit que lorsque vous êtes dans une saisie de texte et appuyez sur "Entrée", il soumet le formulaire. Si vous changez ce comportement, les utilisateurs pourraient être (je ne trouve pas le bon mot, disons ~) surpris.

Quoi qu'il en soit, si vous voulez toujours faire cela, vous devriez écouter l'événement keypress sur l'entrée de texte, et que d'éviter le comportement par défaut devrait faire le travail.

disons que vous utilisez jQuery:

$(input[type=text]).bind('keypress', function(evt) { 
    if(evt.keyCode == 13) { 
     evt.preventDefault(); 
    } 
}); 

Cela devrait le faire. Je ne l'ai pas testé, peut-être que j'ai fait des erreurs, mais tu as eu l'idée, non?

Et peut-être keyup est mieux que ... keypress Je ne sais pas très bien cela, pas assez de pratique sur les raccourcis clavier

Answer 9

essayer cette solution: remplacer la « entrée » avec « bouton » et ajouter attribut le type est égal à « bouton » et gérer l'événement onclick avec la fonction javascript soumettre

<form name='testForm'> 
<input type='text' value="myName" /> 
<button type='button' onclick='testForm.submit()'/> 
</form> 

je pense que cela fonctionne aussi avec l'entrée d'étiquette en ajoutant le même attribut Profitez Mirco

Answer 10

Le plus simple est de définir le style css comme ceci:

&:focus { 
     outline: 0 none; 
    }