이번에는 높이를 자동으로 생성하는 다줄 텍스트 상자[텍스트 영역]를 설정하는 주의 사항에 대해 함께 살펴보겠습니다.
구현 기능:
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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 높이를 자동으로 생성하도록 여러 줄 텍스트 상자 [textarea] 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!