Comment utiliser javascript pour afficher la zone de saisie

Dans le développement Web, les zones de saisie contextuelles sont l'une des exigences les plus courantes. En JavaScript, la zone de saisie contextuelle peut être implémentée à l'aide de la méthode d'invite intégrée de l'objet window. La méthode

prompt() est l'une des méthodes intégrées de l'objet fenêtre JavaScript, qui est utilisée pour afficher une boîte de dialogue avec une zone de saisie dans le navigateur. Cette méthode peut recevoir deux paramètres, le premier paramètre est une chaîne d'invite, utilisée pour inviter l'utilisateur à saisir des informations ; le deuxième paramètre est une valeur par défaut facultative, utilisée pour afficher une valeur par défaut dans la zone de saisie.

Ce qui suit est un exemple de base d'utilisation de la méthode prompt() pour faire apparaître une zone de saisie :

var input = prompt("请输入姓名", "张三");

Le code ci-dessus fera apparaître une boîte de dialogue avec une zone de saisie sur la page, où la zone de saisie La valeur par défaut est "Zhang San" et la chaîne d'invite est "Veuillez entrer votre nom".

Lorsque l'utilisateur saisit des informations dans la zone de saisie et clique sur le bouton "OK" dans la boîte de dialogue, la boîte de dialogue se ferme et la valeur saisie par l'utilisateur sera utilisée comme valeur de retour de la méthode. Si l'utilisateur clique sur le bouton "Annuler" dans la boîte de dialogue, la méthode renvoie null.

if (input == null) {
  alert("你取消了输入");
} else {
  alert("你输入的是：" + input);
}

Une fois la zone de saisie fermée, le code ci-dessus fera apparaître différentes boîtes de dialogue en fonction des opérations de l'utilisateur.

Il convient de noter que la méthode prompt() ne peut être utilisée que pour une simple saisie utilisateur. Dans le développement Web réel, nous devons généralement utiliser des zones de saisie plus flexibles pour prendre en charge davantage de besoins commerciaux. À l’heure actuelle, nous devons utiliser certaines bibliothèques ou frameworks JavaScript pour implémenter ces fonctions.

Par exemple, en utilisant le composant dialog dans la bibliothèque de classes jQuery, nous pouvons afficher très facilement différents types de boîtes de dialogue, et également prendre en charge les skins et effets d'animation personnalisés.

Ce qui suit est un exemple de code pour implémenter une zone de saisie basée sur le composant de dialogue jQuery :

$("#inputDialog").dialog({
  autoOpen: false,      // 是否自动弹出对话框
  resizable: false,     // 是否可缩放
  title: "请输入姓名",  // 标题
  modal: true,          // 是否模态对话框
  buttons: {            // 按钮
    确定: function() {
      var input = $("#inputText").val();
      $(this).dialog("close");
      alert("你输入的是：" + input);
    },
    取消: function() {
      $(this).dialog("close");
    }
  }
});

$("#showInputDialog").click(function() {
  $("#inputDialog").dialog("open");
});

Dans le code ci-dessus, nous sélectionnons d'abord l'élément où se trouve la zone de saisie situé via le sélecteur jQuery et appelez la méthode dialog() pour initialiser une boîte de dialogue. Parmi eux, le paramètre autoOpen indique si la boîte de dialogue apparaîtra automatiquement, redimensionnable indique si la boîte de dialogue est évolutive, modal indique s'il s'agit d'une boîte de dialogue modale et boutons indique les boutons de la boîte de dialogue.

Ensuite, nous ajoutons un bouton à la page et déclenchons le pop-up de la boîte de dialogue via l'événement click.

À ce stade, lorsque l'utilisateur clique sur le bouton "OK" dans la boîte de dialogue, nous pouvons obtenir la valeur dans la zone de saisie via la méthode val() et faire apparaître une boîte de dialogue pour afficher le contenu saisi par l’utilisateur.

Grâce au code ci-dessus, nous pouvons facilement afficher la zone de saisie. Par rapport à la méthode prompt(), cette méthode est plus flexible et peut mieux répondre aux divers besoins de l'entreprise.

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!