높이를 자동으로 생성하도록 여러 줄 텍스트 상자 [textarea] 설정

이번에는 높이를 자동으로 생성하는 다줄 텍스트 상자[텍스트 영역]를 설정하는 주의 사항에 대해 함께 살펴보겠습니다.

구현 기능:

1/텍스트 영역이 새 줄을 감쌀 때 행 높이를 자동으로 늘립니다.
2/텍스트 영역이 행을 삭제할 때 행 높이를 자동으로 줄입니다. 종속성: jquery.xxx.js 사용해야 합니다. 직장에서도 비슷한 기능이 있는데, 플러그인을 사용하려면 다른 파일을 가져와야 하는 것 같아서 파일이 너무 불편해서

textarea jquery 플러그인

<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();

을 작성했습니다. 이 글의 사례를 읽으신 후 방법을 익히셨을 거라 믿습니다. . 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Jquery+모바일 맞춤 버튼 아이콘 단계별 설명

Jquery+모바일 맞춤 버튼 아이콘 단계별 설명

위 내용은 높이를 자동으로 생성하도록 여러 줄 텍스트 상자 [textarea] 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!