Comment utiliser JQuery pour implémenter Ctrl Entrée pour soumettre un form_jquery

Parfois, nous utilisons des combinaisons de touches du clavier au lieu d'utiliser la souris pour éviter des problèmes. Aujourd'hui, nous utilisons JQuery pour implémenter Ctrl Entrée pour soumettre le formulaire.

Lorsque nous publions, après avoir saisi le contenu dans la zone de saisie du contenu, vous pouvez cliquer sur le bouton « Soumettre » pour publier le contenu. Cependant, si vous êtes assez « paresseux », vous pouvez soumettre le formulaire et terminer la publication du contenu en maintenant enfoncée la touche Ctrl Entrée du clavier sans bouger la souris.
Bien sûr, puisque la zone de saisie est une zone de saisie de texte multiligne, nous savons qu'appuyer sur la touche Entrée dans la zone de texte peut modifier la ligne et ne peut pas soumettre directement le formulaire (soumettre). Par défaut, le navigateur ignore la touche Ctrl. . Ensuite, nous pouvons utiliser des scripts Javascript pour contrôler l'utilisation des combinaisons de touches Ctrl Entrée pour terminer la soumission du formulaire. Cet article utilise des exemples pour expliquer l'effet de la soumission du formulaire Ctrl Entrée basé sur jQuery.
HTML
Dans le corps de la page, nous plaçons une zone de saisie de zone de texte, un bouton de soumission et un div#result qui affiche les résultats soumis.

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

CSS
Écrivez simplement quelques lignes CSS pour modifier la zone de saisie de la zone de texte, le bouton de soumission et le style .post pour afficher le contenu après la soumission.

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 

jQuery
La bibliothèque jQuery doit d’abord être préchargée.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

Écrivons un simple plug-in ctrlEnter(), qui prend deux paramètres. Le premier paramètre btns représente l'élément sur lequel le plug-in agit, et le deuxième paramètre. Chaque paramètre fn représente la fonction appelée. Nous ajoutons la fonction performAction() au plug-in pour garantir qu'il est appelé en interne. Ensuite, le plug-in commence à écouter les événements du clavier lorsqu'une touche du clavier enfoncé est enfoncée, il détermine si la touche Entrée et la touche Ctrl sont enfoncées, puis appelle performAction() et empêche le retour chariot et le saut de ligne par défaut. comportement. . Ensuite, nous devrions également lier l'événement click au bouton et appeler performAction(), afin que le contenu puisse être soumis en cliquant sur le bouton.

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

Enfin, appelez ctrlEnter pour soumettre le contenu de la zone de texte à #result, remplacez le retour chariot par br et effacez la zone de texte. Bien entendu, dans les applications réelles, le contenu doit être publié dans le programme de traitement en arrière-plan, et le programme d'arrière-plan PHP et d'autres processus doivent gérer l'interaction du contenu et des données.

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 

Ce qui précède explique comment utiliser JQuery pour implémenter Ctrl Entrée pour soumettre un formulaire. Avez-vous une idée claire ? J'espère que cet article sera utile à votre étude.