Option de croissance automatique du widget de saisie de texte jQuery Mobile

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

jQuery Mobile est une technologie Web utilisée pour créer du contenu réactif accessible sur tous les smartphones, tablettes et ordinateurs de bureau. Dans cet article, nous utiliserons l’option de croissance automatique jQuery Mobile Textinput Widget pour mettre à jour la taille de l’élément textarea. La taille de la zone de texte change en fonction de l’élément de contenu. Cette option est utilisée sur les éléments textarea.

Syntaxe:

$( ".selector" ).textinput({
    autogrow: boolean
});

Lien CDN : Tout d’abord, ajoutez les scripts jQuery Mobile nécessaires à votre projet.


Exemple:

HTML

<!doctype html>

<html lang="en">

 

<head>

    <meta charset="utf-8">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1">

 

    <link rel="stylesheet" href=

"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

 

    <script src="//code.jquery.com/jquery-1.10.2.min.js">

    </script>

 

    <script src=

"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

    </script>

 

    <script>

        $(document).ready(function () {

            $("#GFG").textinput({

                autogrow: true

            });

        });

    </script>

</head>

 

<body>

    <div data-role="page" id="page1">

        <div data-role="header">

            <h1>GeeksforGeeks</h1>

            <h3>jQuery Mobile Textinput Widget autogrow Option</h3>

        </div>

 

        <center>

            <div role="main" class="ui-content" style="width: 50%;">

                <label for="GFG">Enter Text:</label>

                <textarea name="Geeks" id="GFG"></textarea>

            </div>

        </center>

    </div>

</body>

 

</html>

Production:

autogrow

Référence: https://api.jquerymobile.com/textinput/#option-autogrow

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *