Envoi d'un formulaire en appuyant sur Entrée sans bouton d'envoi
https://stackoverflow.com/questions/477691
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Eh bien, j'essaie de soumettre un formulaire en appuyant sur Entrée mais sans afficher de bouton d'envoi. Je ne veux pas utiliser JavaScript si possible car je veux que tout fonctionne sur tous les navigateurs (la seule façon dont JS que je connaisse est avec les événements).
Pour l'instant, le formulaire ressemble à ceci:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>
Ce qui fonctionne plutôt bien. Le bouton d'envoi fonctionne lorsque l'utilisateur appuie sur Entrée et le bouton n'apparaît pas dans Firefox, IE, Safari, Opera et Chrome. Cependant, je n'aime toujours pas la solution car il est difficile de savoir si cela fonctionnera sur toutes les plateformes avec tous les navigateurs.
Quelqu'un peut-il suggérer une meilleure méthode? Ou est-ce aussi bon que possible?
La solution
Essayez:
<input type="submit" style="position: absolute; left: -9999px"/>
Cela poussera le bouton waaay vers la gauche, en dehors de l'écran. La bonne chose à faire est que vous obtiendrez une dégradation progressive lorsque CSS est désactivé.
Mise à jour - Solution de contournement pour IE7
Comme suggéré par Bryan Downing + avec tabindex pour éviter que l'onglet n'atteigne ce bouton (par Ates Goral):
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
Autres conseils
Je pense que vous devriez emprunter la route Javascript ou du moins je le ferais:
<script type="text/javascript">
// Using jQuery.
$(function() {
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
this.form.submit();
}
});
$(this).find('input[type=submit]').hide();
});
});
</script>
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" />
</form>
Avez-vous essayé cela?
<input type="submit" style="visibility: hidden;" />
Étant donné que la plupart des navigateurs comprennent la visibilité: caché et que cela ne fonctionne pas vraiment comme display: aucun , je suppose que tout devrait bien se passer. Je n'ai pas vraiment testé moi-même, donc CMIIW.
Une autre solution sans le bouton d'envoi:
HTML
<form>
<input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>
jQuery
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
// enter has keyCode = 13, change it if you want to use another button
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
Pour tous ceux qui consulteront cette réponse à l'avenir, HTML5 implémentera un nouvel attribut pour les éléments de formulaire, hidden , qui appliquera automatiquement display: none à votre élément.
par exemple
<input type="submit" hidden />
Utiliser le code suivant, cela corrigeait mon problème dans les 3 navigateurs (FF, IE et Chrome):
<input type="submit" name="update" value=" Apply "
style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
hidefocus="true" tabindex="-1"/>
Ajoutez la ligne ci-dessus en tant que première ligne de votre code avec la valeur appropriée de nom et de valeur.
Au lieu du hack que vous utilisez actuellement pour masquer le bouton, il serait beaucoup plus simple de définir Visibilité: Réduire; dans l'attribut style. Cependant, je recommanderais quand même d'utiliser un peu de Javascript simple pour soumettre le formulaire. Autant que je sache, le soutien pour ce genre de choses est omniprésent de nos jours.
Il suffit de définir l'attribut masqué sur true:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" hidden="true" />
</form>
La manière la plus élégante de le faire est de conserver le bouton d'envoi, mais de définir sa bordure, son remplissage et sa taille de police sur 0.
Cela fera que le bouton aura la dimension 0x0.
<input type="submit" style="border:0; padding:0; font-size:0">
Vous pouvez l’essayer vous-même. En définissant un contour sur l’élément, vous verrez un point, qui constitue la bordure extérieure "entourant". l'élément 0x0 px.
Pas besoin de visibilité: caché, mais si cela vous oblige à dormir la nuit, vous pouvez aussi ajouter cela.
IE ne permet pas d'appuyer sur la touche Entrée pour soumettre un formulaire si le bouton d'envoi n'est pas visible et si le formulaire comporte plusieurs champs. Donnez-lui ce qu'il veut en fournissant une image transparente de 1x1 pixel sous la forme d'un bouton d'envoi. Bien sûr, cela prendra un pixel de la mise en page, mais regardez ce que vous devez faire pour la cacher.
<input type="image" src="img/1x1trans.gif"/>
Voici ma solution, testée sous Chrome, Firefox 6 et IE7 +:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
la manière la plus simple
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
Pour ceux qui ont des problèmes avec IE et pour les autres aussi.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
Vous pouvez aussi essayer ceci
<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">
Vous pouvez inclure une image de largeur / hauteur = 0 px
<input type="submit" style="display:none;"/>
Cela fonctionne bien et c'est la version la plus explicite de ce que vous essayez d'atteindre.
Notez qu'il existe une différence entre : aucun et visibilité: masqué pour les autres éléments de formulaire.
solution HTML5
<input type="submit" hidden />
Je l'ai ajouté à une fonction sur le document prêt. S'il n'y a pas de bouton d'envoi sur le formulaire (tous mes formulaires JQuery Dialog n'ont pas de boutons d'envoi), ajoutez-le.
$(document).ready(function (){
addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
$("form").each(function(i,el){
if($(this).find(":submit").length==0)
$(this).append(hiddenSubmit);
});
}
j'ai utilisé
< input class="hidden" type="submit" value=""
onclick="document.getElementById('loginform').submit()"; />
et
.hidden {
border:0;
padding:0;
font-size:0;
width: 0px;
height: 0px;
}
dans le fichier .css. Cela a fonctionné magiquement pour moi aussi. :)
