contrôle CSS en lecture seule

Contrôle CSS en lecture seule : comment utiliser CSS pour implémenter le contrôle en lecture seule des formulaires HTML

En tant que développeur front-end, vous devez souvent concevoir et implémenter des formulaires HTML. Parfois, vous devez rendre certains champs en lecture seule. Le contenu des champs en lecture seule peut être consulté par les utilisateurs, mais ne peut pas être modifié. Cela empêche les utilisateurs de modifier inutilement les données du formulaire et protège l’intégrité et l’exactitude des données. Cet article explique comment utiliser CSS pour implémenter le contrôle en lecture seule des formulaires HTML.

Dans les formulaires HTML, il existe deux manières de définir un champ en lecture seule : en utilisant l'attribut HTML "readonly" ou en utilisant les styles CSS. Nous utiliserons CSS pour contrôler la lecture seule car cette méthode est plus flexible et plus facile à contrôler.

En CSS, vous pouvez utiliser l'attribut "pointer-events" pour contrôler l'attribut en lecture seule d'un champ de formulaire. Pointer-events est une nouvelle propriété de CSS3, qui est principalement utilisée pour contrôler si les événements de souris des éléments peuvent être déclenchés. Lorsque "pointer-events:none" est défini, cela signifie que l'élément ne répondra à aucun événement de souris, c'est-à-dire que l'élément devient un contrôle en lecture seule. Jetons maintenant un coup d'œil aux étapes spécifiques :

1. Ajoutez des éléments de formulaire en HTML

Tout d'abord, ajoutez les éléments de formulaire qui doivent être définis en lecture seule dans le code HTML, tels que les zones de texte, les zones de mot de passe, les zones de dépôt. vers le bas des cases, etc. Voici un exemple simple :

<label>用户名</label>
<input type="text" name="username" id="username" />

<label>密码</label>
<input type="password" name="password" id="password" />

<label>性别</label>
<select name="gender" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>

2. Ajoutez un style CSS en lecture seule à l'élément de formulaire

Ensuite, ajoutez un style à l'élément de formulaire qui doit être défini en lecture seule dans le fichier CSS ou la balise de style. Un élément peut être rendu en lecture seule à l'aide de l'attribut "pointer-events:none". En parallèle, vous pouvez ajouter différents styles à ces champs pour les mettre en valeur. Voici un exemple :

input[readonly], select[readonly] {
  pointer-events:none;
  background-color:#f0f0f0;
  color:#888;
}

Dans cet exemple, nous utilisons "pointer-events:none" pour définir l'élément en lecture seule. Définissez également la couleur d'arrière-plan sur gris clair, la couleur de police sur gris foncé et ajoutez un attribut "lecture seule" à l'élément. Par conséquent, la couleur d’arrière-plan de ces éléments de formulaire passe au gris clair et la couleur de la police devient gris foncé et ne peut pas être modifiée.

3. Utilisez JavaScript pour contrôler l'état en lecture seule

En plus d'utiliser des styles CSS pour contrôler l'état en lecture seule, nous pouvons également utiliser JavaScript pour contrôler l'état en lecture seule des éléments du formulaire. Lorsque vous utilisez JavaScript, vous devez ajouter un écouteur d'événement à l'élément de formulaire, de sorte que lorsque l'état de lecture seule de l'élément de formulaire change, la fonction JavaScript correspondante soit appelée. Voici un exemple :

<input type="button" value="取消只读" onclick="makeReadonly(false)" />
<input type="button" value="设置只读" onclick="makeReadonly(true)" />

<script type="text/javascript">
function makeReadonly(isReadonly) {
  document.getElementById("username").readOnly = isReadonly;
  document.getElementById("password").readOnly = isReadonly;
  document.getElementById("gender").disabled = isReadonly;
  
  // 更新表单样式
  if (isReadonly) {
    document.getElementById("username").classList.add("readonly");
    document.getElementById("password").classList.add("readonly");
    document.getElementById("gender").classList.add("readonly");
  } else {
    document.getElementById("username").classList.remove("readonly");
    document.getElementById("password").classList.remove("readonly");
    document.getElementById("gender").classList.remove("readonly");
  }
}
</script>

Dans cet exemple, nous avons ajouté deux boutons, un pour définir l'élément du formulaire en lecture seule et l'autre pour annuler l'état en lecture seule. Lorsque les utilisateurs cliquent sur ces boutons, les fonctions JavaScript correspondantes sont appelées. La fonction consiste à mettre à jour le statut et le style en lecture seule de l'élément de formulaire en fonction de la valeur du paramètre.

Résumé

Dans cet article, nous avons introduit l'utilisation des styles CSS pour contrôler le statut en lecture seule des éléments de formulaire HTML. Avec l'aide de l'attribut "pointer-events" de CSS3, nous pouvons rapidement implémenter cette fonction. Dans le même temps, nous avons également démontré comment utiliser JavaScript pour contrôler dynamiquement l'état en lecture seule des éléments de formulaire. Que vous utilisiez CSS ou JavaScript pour contrôler les attributs en lecture seule des éléments de formulaire, ces techniques peuvent vous permettre d'obtenir un meilleur contrôle des données et une meilleure expérience utilisateur dans vos applications Web.

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!