### [Utilisation de l'API JavaScript pour les champs en lecture seule](https://wpforms.com/developers/using-the-javascript-api-for-read-only-fields/) **Publié le :** 22 septembre 2025 **Auteur :** Umair Majeed **Contenu :** Voulez-vous contrôler les champs en lecture seule dans WPForms à l'aide de JavaScript ? WPForms fournit un ensemble de méthodes JavaScript qui vous permettent de verrouiller, déverrouiller et basculer les champs de formulaire directement sur le frontend. Ces fonctions sont utiles si vous souhaitez ajouter une logique personnalisée, telle que la désactivation des champs après la soumission ou la mise de certains champs en lecture seule en fonction des actions de l'utilisateur. ## Ajout de votre JavaScript personnalisé Pour utiliser ces méthodes, vous devrez ajouter un extrait de code JavaScript personnalisé à votre site. Si vous ne savez pas comment ajouter du code personnalisé, veuillez consulter notre guide sur [l'ajout de JavaScript personnalisé pour WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Assurez-vous que votre code s'exécute après le chargement de WPForms en l'encapsulant dans l'événement `wpformsReady`. ### Méthodes disponibles Les méthodes suivantes sont disponibles dans l'objet `wpforms.field`. ### `wpforms.field.lock( formId, fieldId )` Verrouille un champ spécifique afin que les utilisateurs puissent le voir mais pas le modifier. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.lock(123, 5); }); ``` ### `wpforms.field.unlock( formId, fieldId )` Supprime l'état de lecture seule d'un champ spécifique. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.unlock(123, 5); }); ``` ### `wpforms.field.toggle( formId, fieldId, state )` Bascule l'état de lecture seule d'un champ. - true — verrouille le champ - false — déverrouille le champ - ‘auto’ (par défaut) — bascule automatiquement en fonction de l'état actuel ``` // Avec état explicite wpforms.field.toggle(123, 5, true); // Avec comportement par défaut ('auto') wpforms.field.toggle(123, 5); ``` ### `wpforms.field.isLocked( formId, fieldId )` Vérifie si un champ est actuellement verrouillé. Renvoie un booléen. ``` jQuery(document).on('wpformsReady', function() { if ( wpforms.field.isLocked(123, 5) ) { console.log('Le champ est verrouillé'); } }); ``` ### `wpforms.field.lockAll( formId )` Verrouille tous les champs d'un formulaire. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.lockAll(123); }); ``` ### `wpforms.field.unlockAll( formId )` Déverrouille tous les champs d'un formulaire. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.unlockAll(123); }); ``` ### `wpforms.field.readOnlyClass` Renvoie le nom de la classe CSS appliqué lorsqu'un champ est en lecture seule. ``` console.log( wpforms.field.readOnlyClass ); // 'wpforms-field-readonly' ``` ## Notes - Remplacez `123` par l'ID de votre formulaire et `5` par l'ID du champ que vous souhaitez cibler. - Utilisez toujours l'événement `wpformsReady` pour vous assurer que les méthodes sont disponibles. - Ces méthodes ne fonctionnent que sur le frontend — elles n'affectent pas le constructeur de formulaire ni les entrées enregistrées. **Catégories :** Tutoriels, Champs ---