> 웹 프론트엔드 > JS 튜토리얼 > 높이를 자동으로 생성하도록 여러 줄 텍스트 상자 [textarea] 설정

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

php中世界最好的语言
풀어 주다: 2018-04-26 13:42:09
원래의
2675명이 탐색했습니다.

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

구현 기능:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿