Confirmation JavaScript : sélectionnez Oui ou Non

Dans ce court article, nous verrons comment afficher une boîte de dialogue de confirmation à l'aide de JavaScript. Les boîtes de dialogue de confirmation vous permettent d'effectuer des actions basées sur la saisie de l'utilisateur.

JavaScript est l'une des technologies de base d'Internet. Il est utilisé par la plupart des sites Web et pris en charge par tous les navigateurs Web modernes sans avoir besoin de plugins. Chez Envato Tuts+, nous discutons de trucs et astuces qui peuvent vous aider dans votre développement JavaScript quotidien.

En tant que développeur JavaScript, vous avez souvent besoin d'obtenir la contribution de l'utilisateur sous la forme d'une question oui ou non et d'effectuer une action en fonction de celle-ci. Plus précisément, certaines actions sont sensibles et ne peuvent pas être annulées, et vous souhaitez donner à l'utilisateur un avertissement ou une confirmation qu'il avait réellement l'intention d'effectuer l'action afin qu'il ne le fasse pas par erreur. Par exemple, s'il existe un lien de suppression qui vous permet de supprimer une entité de la base de données, vous devez confirmer auprès de l'utilisateur s'il souhaite réellement la supprimer. Ainsi, même si un utilisateur clique par erreur sur le lien de suppression, il a au moins la possibilité de l’annuler.

Dans cet article, je vais vous montrer deux façons de confirmer les actions de l'utilisateur en JavaScript : en utilisant confirm 方法和使用隐藏确认 div.

confirm Syntaxe de la méthode

En JavaScript, vous pouvez utiliser la méthode window 对象的 confirm de l'objet window pour afficher une boîte de dialogue et attendre que l'utilisateur confirme ou annule. Aujourd’hui, nous allons discuter de son fonctionnement avec un exemple pratique.

Dans cette section, nous présenterons la syntaxe des méthodes window.confirm.

La syntaxe de la méthode

confirm est la suivante :

var result = window.confirm(message);

La méthode

confirm prend un seul argument de chaîne dans lequel vous transmettez le message à afficher dans la boîte de dialogue. Il s'agit d'un paramètre facultatif, mais vous devez transmettre un message sensé, sinon une boîte de dialogue vide avec les options oui et non s'affichera et pourrait ne rien dire à vos visiteurs. Généralement, le message prend la forme d’une question et propose à l’utilisateur deux options parmi lesquelles choisir.

Dans la boîte de dialogue, il y a deux boutons : OK et Annuler. Si l'utilisateur clique sur le bouton OK, la méthode de confirmation renvoie true，如果用户点击取消按钮，confirm方法返回false. Vous pouvez ainsi comprendre le choix de l'utilisateur grâce à la valeur de retour de la méthode de confirmation. (Si vous voulez que vos boutons disent quelque chose de différent, comme Oui et Non, je vais vous montrer comment faire au bas de cet article.)

Étant donné que l'objet window est toujours implicite, ce qui signifie que ses propriétés et méthodes sont toujours dans la portée, vous pouvez également appeler la méthode window 对象始终是隐式的，也就是说它的属性和方法始终在作用域内，因此您还可以调用 confirm, comme indiqué dans l'extrait de code suivant.

var result = confirm(message);

Il est à noter que la boîte de dialogue de confirmation est modale et synchrone. Par conséquent, l'exécution du code JavaScript s'arrête lorsque la boîte de dialogue est affichée et continue après que l'utilisateur ferme la boîte de dialogue en cliquant sur le bouton OK ou Annuler.

Voici un aperçu de la syntaxe de la méthode confirm. Dans la section suivante, nous présentons un exemple concret.

confirm Exemples réels de méthodes

Dans cette section, nous montrerons comment utiliser la méthode confirm en JavaScript à travers un exemple pratique.

Jetez un œil à l’exemple ci-dessous.

Lorsqu'un utilisateur clique sur Supprimer mon profil ! Lorsque le bouton est enfoncé, il appellera la fonction deleteProfile 函数。在deleteProfile Nous appelons la méthode de confirmation, qui affiche une boîte de dialogue de confirmation à l'utilisateur.

Enfin, si l'utilisateur clique sur le bouton OK dans la boîte de dialogue de confirmation, nous procéderons à la redirection de l'utilisateur vers la page /deleteProfile.php, qui effectuera l'action de suppression. En revanche, si l'utilisateur clique sur le bouton Annuler, nous n'effectuerons aucune action. L'exécution de JavaScript s'arrêtera jusqu'à ce que l'utilisateur fasse une sélection et ferme la boîte de dialogue de confirmation.

Voici comment afficher une boîte de dialogue de sélection oui ou non à l'aide de la méthode de confirmation en JavaScript.

Confirmez Oui ou Non en utilisant Hidden Div

L'utilisation de la méthode confirm pour obtenir la confirmation de l'utilisateur présente certains inconvénients. La première est que la boîte de dialogue de confirmation ne fait pas partie de l’interface utilisateur de votre application ou de votre site Web. Il n’utilisera pas votre marque ou votre palette de couleurs. Il n'est pas non plus personnalisable, par exemple si vous souhaitez dire Oui ou Non au lieu de OK et Annuler. Enfin, la boîte de dialogue de confirmation est modale, donc tant qu'elle est affichée, l'utilisateur ne peut interagir avec aucune autre partie de l'interface de l'application.

Une autre façon de confirmer oui ou non est d'utiliser un div caché sur la page. Jetez un œil à l'exemple ci-dessous :

Dans cet exemple, nous avons un div de confirmation caché avec un identifiant de confirm。要显示 div，我们只需将其 hidden 属性设置为 true。当我们想要显示确认信息时，我们将 hidden 设置为 true，并再次将其设置为 false pour le masquer.

Comme vous pouvez le constater, cette méthode de confirmation par oui ou par non nous offre plus de flexibilité et de personnalisation que la méthode window.confirm.

Conclusion

Aujourd'hui, nous avons discuté de deux façons d'obtenir la confirmation de l'utilisateur en JavaScript. Examinons d’abord la méthode la plus simple : la méthode window.confirm. Cependant, cela ne crée pas une bonne expérience utilisateur. Ensuite, je vous ai montré comment utiliser un div caché pour obtenir la confirmation de l'utilisateur et avoir plus de contrôle sur l'apparence et le comportement de la confirmation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!