Vous cherchez à rendre vos applications plus interactives en détectant les actions sur le clavier.
Ignorer les interactions clavier peut conduire à une expérience utilisateur limitée et frustrante.
Découvrez comment l’événement keypress jQuery vous permet de capturer et de manipuler la saisie en temps réel pour des interactions améliorées.
Apprenez les bases de jQuery à travers des projets pratiques et engageants.
Événement keypress jQuery : Détection clavier
L’événement jQuery keypress() est déclenché lorsqu’une touche du clavier est enfoncée puis relâchée. Il s’agit d’un type d’événement clavier utilisé pour détecter le moment où un utilisateur appuie sur une touche du clavier.
Remarque
: l’événement keypress est similaire à l’événement keydown, sauf que les touches de modification et les touches non imprimables telles que Maj, Échap, Retour arrière ou Supprimer, les touches fléchées, etc. déclenchent des événements keydown mais pas des événements keypress.
Implémenter keypress jQuery pour saisie texte
Alors ici, nous allons reprendre l’exercice qu’on avait faire pour faire une application de keypress. L’application consistera à détecter le moment où l’utilisateur apura sur une touche du clavier pour ensuite écrire la valeur de cette touche dans un paragraphe.
Vous avez ici tous le code requis pour faire cela.
Code HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-c88df08e-c134-40b6-80c5-71ec6bfb9e89: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-c88df08e-c134-40b6-80c5-71ec6bfb9e89: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"c88df08e-c134-40b6-80c5-71ec6bfb9e89","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form action="" method="post">
<label for="prenom">prénom</label>
<input type="text" id="prenom">
<label for="nom">nom</label>
<input type="text" id="nom">
</form>
<section>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis obcaecati laborum dolorum ducimus eaque blanditiis quos odio voluptatem, cumque veniam temporibus ab? Quod illum voluptas dolorum non quas eaque expedita.</p>
<p>Je soussigné <span class="prenom">prénom</span> <span class="nom">nom</span>, atteste de l'exactitude des informations ci-dessus, <br> <em>Cordialement, <br> <span class="prenom">prénom</span> <span class="nom">nom</span></em></p>
</section>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"cd054905b0","url":"https:\/\/blog.alphorm.com\/evenement-keypress-jquery-explique","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Code CSS :
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #2c3e50;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
form, section {
background-color: #ecf0f1;
padding: 25px;
width: 350px;
border-radius: 9px;
margin: 25px;
}
form {
background: none;
}
input {
display: block;
margin: 15px;
padding: 10px;
width: 100%;
box-sizing: border-box;
outline: none;
border: 1px solid #ddd;
}
label {
font-size: 1.2rem;
text-transform: capitalize;
margin-top: 25px;
display: block;
}
.prenom {
text-transform: capitalize;
}
.nom {
text-transform: uppercase;
}
Code JavaScript :
$(document).ready(function() {
$('#prenom').keypress(function(event) {
$('label[for="prenom"]').css('color', '#f3f3f3');
let prenom = $(this).val();
$('.prenom').text(prenom + event.key);
});
$('#nom').keypress(function(event) {
$('label[for="nom"]').css('color', '#f3f3f3');
let nom = $(this).val();
$('.nom').text(nom + event.key);
});
});
Lorsqu’une touche est appuyée sur l’élément #prenom :
Le code définit la propriété CSS color de l’élément label associé à #prenom sur une couleur gris clair. Il récupère la valeur actuelle de l’élément #prenom à l’aide de $(this).val().
Il met à jour le contenu textuel d’un élément de classe prenom en concaténant la valeur actuelle de #prenom avec la touche qui vient d’être appuyée (event.key).
Et c’est tout pareil pour le nom.
Voyons ça en image.
Cet exemple donc enregistrera le caractère enfoncé dans le champ de saisie, vous aidant à capturer et à manipuler la saisie de texte en temps réel.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment fonctionne l'événement keypress en jQuery ?
L’événement keypress en jQuery se déclenche lorsqu’une touche du clavier est enfoncée puis relâchée. Il est principalement utilisé pour détecter la saisie de texte par l’utilisateur. Contrairement à keydown, keypress ne reconnaît pas les touches de modification comme Maj ou Échap. Cela permet de capturer des caractères imprimables et de manipuler la saisie en temps réel, par exemple, pour afficher ce qui est tapé dans un champ de texte.
Quelles sont les différences entre keypress et keydown ?
La différence principale entre keypress et keydown réside dans les touches qu’ils détectent. Keydown est déclenché par toutes les touches, y compris les touches de modification et non imprimables comme Maj ou Échap. Keypress, en revanche, ne reconnaît que les touches imprimables, ce qui le rend idéal pour capturer la saisie de texte. Ainsi, keypress est souvent utilisé pour des applications nécessitant une interaction sur la saisie de l’utilisateur.
Comment utiliser keypress pour manipuler la saisie de texte ?
Pour manipuler la saisie de texte avec keypress, vous pouvez utiliser jQuery pour écouter l’événement sur un champ de saisie. Par exemple, en attachant keypress à un champ de texte, vous pouvez récupérer la valeur actuelle du champ et y ajouter le caractère de la touche appuyée, puis mettre à jour l’affichage en conséquence. Cela permet de réagir dynamiquement à la saisie de l’utilisateur et de modifier le contenu de la page en temps réel.
Quels sont les cas d'utilisation de keypress en jQuery ?
L’événement keypress en jQuery est utilisé dans divers cas nécessitant la capture de la saisie utilisateur en temps réel. Par exemple, il peut être utilisé pour des applications où vous devez afficher immédiatement les caractères saisis dans un champ texte, comme dans les formulaires interactifs ou les applications de chat. Il est également utile pour valider les entrées de l’utilisateur ou pour déclencher des actions spécifiques lorsque certaines touches sont pressées.
Comment intégrer keypress dans un projet jQuery existant ?
Pour intégrer keypress dans un projet jQuery, ajoutez simplement une fonction keypress à l’élément cible en utilisant jQuery. Par exemple, $(‘#element’).keypress(function(event) {…}) permet d’exécuter du code chaque fois qu’une touche est pressée sur l’élément spécifié. Vous pouvez ainsi manipuler les valeurs saisies ou déclencher des actions selon le caractère appuyé. Assurez-vous que jQuery est bien inclus dans votre projet pour que cela fonctionne.
Conclusion
En maîtrisant l’événement keypress, vous pouvez améliorer l’interactivité et la réactivité de vos applications jQuery. Quel autre événement jQuery souhaitez-vous explorer pour enrichir vos projets ?
