Comment utiliser JavaScript pour modifier la bordure de la zone de saisie après l'avoir remplie ?-js tutoriel-php.cn

Comment utiliser JavaScript pour modifier la bordure de la zone de saisie après l'avoir remplie ?

王林

Libérer： 2023-09-09 19:37:02

avant

1524 Les gens l'ont consulté

La propriété

如何使用 JavaScript 填充输入框后更改输入框边框？

style.border est utilisée pour modifier la bordure d'un élément. Elle renvoie les trois propriétés border-bottom de l'élément, à savoir border-color, border-style et border-width. C'est l'une des propriétés des objets de style HTML.

Nous utilisons l'événement onchange pour que les modifications prennent effet après avoir rempli la case. onchange est l'un des attributs JavaScript qui se produit lorsque la valeur d'un élément HTML change. Il fonctionne également avec les boutons radio et les cases à cocher lorsque l'état sélectionné change.

L'événement

onchange peut également être utilisé avec l'élément HTML

Dans cet article, nous apprendrons comment modifier la bordure de la zone de saisie après l'avoir remplie à l'aide de JavaScript.

Grammaire

Ce qui suit est la syntaxe de la propriété style.border pour modifier la bordure de la zone de saisie après avoir rempli la case -

object.style.border = "width style color|initial|inherit"

Copier après la connexion

Paramètres

width – utilisé pour définir la largeur de la bordure. Nous pouvons transmettre la valeur de largeur comme Épais, Mince, Moyen ou comme valeur en px (c'est-à-dire 10 px).
style – utilisé pour définir le style de bordure. Nous pouvons transmettre des valeurs de style comme "solide", "pointillé", "double", etc.
color – utilisé pour définir la couleur de la bordure.
initial – utilisé pour définir une propriété à sa valeur par défaut.
inherit – utilisé pour hériter des propriétés des éléments parents.

Valeur de retour

StyleBorder renvoie une valeur de chaîne qui représente la couleur, la largeur et le style de la bordure de l'élément.

Étapes

Après avoir rempli la case, nous devons suivre les étapes ci-dessous pour modifier la bordure de la zone de saisie -

Étape 1 - Définissez l'élément de formulaire avec des champs de saisie de type texte et bouton.
Étape 2 - Le code du script définit la fonction permettant de modifier la bordure de la zone de saisie après avoir rempli la zone.
Étape 3 - Dans la section JavaScript, déclarez l'événement onchange, qui se produit lorsque la valeur de l'élément change.
Étape 4 - style.border est la propriété d'arrière-plan HTML DOM utilisée pour modifier la bordure inférieure de l'élément.
Étape 5 - Chaque fois que l'utilisateur ajoute une valeur à la valeur d'entrée, l'événement onchange est déclenché et lorsque cet événement est déclenché, la valeur est vérifiée si elle est nulle. Si la valeur existe et n'est pas vide, le bas de la bordure se transformera en une ligne pointillée verte.

Exemple

Dans l'exemple ci-dessous, nous utilisons JavaScript pour modifier la bordure remplie de la première zone de saisie en "10px vert uni" et la bordure de la deuxième zone de saisie en "3px pointillé rouge".

<html>
<body style="text-align: center;">
   <h2>Changing the Borders of Input Box after filling the Box</h2>
   <!--defining the form-->
   <form>
      <label>First Name:</label>
      <input type="text" id="firstname" name="firstname" value=""><br><br>
      <label>Second Name:</label>
      <input type="text" id="secondname" name="secondname" value=""><br><br>
      <input type="button" value="submit">
   </form>
   <script>
      var tp = document.getElementById("firstname");
      var tp1 = document.getElementById("secondname");
      tp.onchange = function (f) {
         if (tp.value != '') {
            f.target.style.border = "10px solid green";
         }
      };
      tp1.onchange = function (g) {
         if (tp1.value != '') {
            g.target.style.border = "3px dotted red";
         }
      };
   </script>
</body>
</html>

Copier après la connexion

Exemple

Modifiez uniquement la bordure inférieure de la zone de saisie

Dans cet exemple, nous utilisons la propriété style borderBottom pour modifier la bordure inférieure de la zone de saisie. Pour que les modifications prennent effet, nous utilisons l'attribut d'événement onchange.

<html>
<body style="text-align: center;">
   <h2>Changing the bottom border of Input Box after filling the box</h2>
   <form>
      <label>First Name:</label>
      <input type="text" id="firstname" name="firstname" value=""><br><br>
      <label>Second Name:</label>
      <input type="text" id="secondname" name="secondname" value=""><br><br>
      <input type="button" value="submit">
   </form>
   <script>
      var tp = document.getElementById("firstname");
      var tp1 = document.getElementById("secondname");
      tp.onchange = function (f) {
         if (tp.value != '') {
            f.target.style.borderBottom = "thick solid #00ff00";
         }
      };
      tp1.onchange = function (g) {
         if (tp1.value != '') {
            g.target.style.borderBottom = "3px dotted green";
         }
      };
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous montrons avec un exemple comment changer la bordure d'une zone de saisie après l'avoir remplie. Nous avons vu l'exemple beige où la bordure inférieure devient verte chaque fois que nous saisissons du texte dans les deux champs de saisie. Si la valeur dans les deux champs de saisie est vide, la couleur ne changera pas, elle ne changera que si la valeur est présente.

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!