Définir une zone de texte multiligne [textarea] pour générer automatiquement la hauteur

Cette fois, je vais vous apporter la zone de texte multiligne[textarea] pour générer automatiquement la hauteur. Quelles sont les précautions pour définir la zone de texte multiligne [textarea]. ] pour générer automatiquement la hauteur ? Ce qui suit est un cas pratique, jetons un oeil.

Fonctions d'implémentation :

1/Augmenter automatiquement la hauteur d'une ligne lorsque la zone de texte enveloppe une ligne
2/Réduire automatiquement la hauteur d'une ligne lorsque la zone de texte supprime une ligne Dépendances : jquery.xxx.js Nécessaire pour le travail J'utilise des fonctions similaires mais je trouve peu pratique d'importer d'autres fichiers lorsque j'utilise un plug-in, j'ai donc écrit un

plug-in jquery textarea

<p class="form-group">
    <label class="col-sm-3 control-label no-
padding-right
" for="form-field-5"> 内容</label>
    <p class="col-sm-9">
        <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>
    </p>
</p>

jQuery.extend({
    textareaAutosize_dc: function() {
        $("textarea").on("keyup", function(e) {
            var 
current
EnterCount = $(this).val().split("\n").length;
            var lineHeight = Number($(this).css("
line-height
").replace("px", ""));
            var enterCount = $(this).attr("enterCount");
            if (currentEnterCount < enterCount && enterCount != undefined) {
                //每行减掉固定行高
                $(this).height($(this).height() - lineHeight);
            } else if (currentEnterCount > enterCount) {
                //每行加入固定行高
                $(this).height($(this).height() + lineHeight);
                $(this).attr("enterCount", currentEnterCount);
            }
            //记录当前行高
            $(this).attr("enterCount", currentEnterCount);
        });
    }
});
//调用自动高度
$.textareaAutosize_dc();

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, pour un contenu plus passionnant, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de l'icône du bouton personnalisé Jquery+Mobile

Étapes de l'icône du bouton personnalisé Jquery+Mobile détaillées explication

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!