programing

jQuery를 사용하여 텍스트 영역 자동 확장

sourcetip 2023. 8. 20. 18:12
반응형

jQuery를 사용하여 텍스트 영역 자동 확장

jQuery를 사용하여 텍스트 영역을 자동으로 확장하려면 어떻게 해야 합니까?

미팅의 의제를 설명하기 위한 텍스트 상자가 있으므로, 의제의 텍스트가 텍스트 상자 영역을 계속 확장할 때 해당 텍스트 상자를 확장하려고 합니다.

플러그인을 원하지 않는 경우 매우 간단한 솔루션이 있습니다.

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

jsFiddle에서 작동하는 것을 참조하십시오. 여기서 다른 텍스트 영역 질문에 답하기 위해 사용했습니다.

텍스트가 제거될 때 역방향으로 수행하거나 더 작게 만드는 질문에 답하려면: jsFiddle

그리고 플러그인을 원한다면,

@제이슨이 여기에 하나를 디자인했습니다.

저는 많은 것을 시도했고 이것은 좋습니다.링크가 비활성화되었습니다.여기에서 최신 버전을 사용할 수 있습니다.이전 버전은 아래를 참조하십시오.
텍스트 영역에서 Enter 키를 길게 눌러 시도할 수 있습니다.다른 자동 확장 텍스트 영역 플러그인과 효과를 비교합니다.

주석을 기준으로 편집

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

참고: 필요한 js 파일을 포함해야 합니다...

시 수장/▁the▁to수▁you▁in다▁set▁from▁on▁canareabar를 설정할 수 있습니다.overflowhidden또한:

$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()



업데이트:

위의 링크가 끊어졌습니다.하지만 여기서 자바스크립트 파일을 얻을 수 있습니다.

텍스트 영역을 늘리거나 줄입니다.이 데모에서는 이벤트 바인딩에 jQuery를 사용하지만, 어떤 식으로든 필수는 아닙니다.
(IE 지원 없음 - IE가 행 속성 변경에 응답하지 않음)

데모 페이지

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

Javascript (자막)

$(document)
    .one('focus.textarea', '.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

이것을 사용해 보세요.

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>

SpYk3 덕분에HH, 저는 그의 솔루션에서 시작하여 축소되는 기능을 추가하고 훨씬 더 단순하고 빠른 솔루션으로 전환했습니다.

$("textarea").keyup(function(e) {
    $(this).height(30);
    $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});

현재 Chrome, Firefox 및 Android 2.3.3 브라우저에서 테스트되었습니다.

일부 브라우저에서는 스크롤 막대가 깜박일 수 있습니다.그것을 해결하기 위해 이 CSS를 추가합니다.

textarea{ overflow:hidden; }

자동 확장 가능한 텍스트 영역을 정의하려면 다음 두 가지 작업을 수행해야 합니다.

  1. 키 입력을 누르거나 내용을 두 줄 이상 입력한 후 확장합니다.
  2. 그리고 사용자가 공백을 입력한 경우 블러로 축소하여 실제 크기를 얻습니다. (상여)

작업을 수행할 수 있는 핸드메이드 기능이 있습니다.

거의 모든 브라우저에서 잘 작동합니다(< IE7).방법은 다음과 같습니다.

    //Here is an event to get TextArea expand when you press Enter Key in it.
    // intiate a keypress event
    $('textarea').keypress(function (e) {  
       if(e.which == 13)   {   
       var control = e.target;                     
       var controlHeight = $(control).height();          
      //add some height to existing height of control, I chose 17 as my line-height was 17 for the control    
    $(control).height(controlHeight+17);  
    }
    }); 

$('textarea').blur(function (e) {         
    var textLines = $(this).val().trim().split(/\r*\n/).length;      
    $(this).val($(this).val().trim()).height(textLines*17);
    });

여기 이것에 대한 게시물이 있습니다.

저는 Textarea Expander jQuery 플러그인을 사용한 적이 있으며, 좋은 결과를 얻었습니다.

모든 사용자가 이 jQuery 플러그인 xautoresize-jquery를 사용해야 합니다.그것은 정말 좋고 당신의 문제를 해결해 줄 것입니다.

function autosize(textarea) {
    $(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
    $(textarea).height($(textarea).prop("scrollHeight"));
}

$(document).ready(function () {
    $(document).on("input", "textarea", function() {
        autosize(this);
    });
    $("textarea").each(function () {
        autosize(this);
    });
});

9 에서는 (Internet Explorer 9 사용 가능)를하므로 이 기능이 .input

나는 단지 페이지 로드에서 텍스트 영역을 확장하기 위해 이 기능을 만들었습니다. 바꿔요 ㅠㅠㅠㅠㅠeachkeyup텍스트 영역을 입력할 때 발생합니다.

// On page-load, auto-expand textareas to be tall enough to contain initial content
$('textarea').each(function(){
    var pad = parseInt($(this).css('padding-top'));
    if ($.browser.mozilla) 
        $(this).height(1);
    var contentHeight = this.scrollHeight;
    if (!$.browser.mozilla) 
        contentHeight -= pad * 2;
    if (contentHeight > $(this).height()) 
        $(this).height(contentHeight);
});

Chrome, IE9 및 Firefox에서 테스트되었습니다.안타깝게도 파이어폭스에는 다음에 대한 잘못된 값을 반환하는 이 버그가 있습니다.scrollHeight따라서 위의 코드에는 이에 대한 해결 방법이 포함되어 있습니다.

Reigel이 제공한 답변에서 몇 가지 버그를 수정했습니다(승인된 답변).

  1. html 엔티티가 교체되는 순서는 섀도 요소에서 예기치 않은 코드를 발생시키지 않습니다. (원래는 ">"를 "&amp;"로 교체하여 드물게 높이 계산이 잘못되기도 합니다.)
  2. 텍스트가 새 줄로 끝나는 경우 섀도에는 원본처럼 높이가 고정된 대신 추가 문자 "#"이 추가됩니다.
  3. 초기화 후 텍스트 영역의 크기를 조정하면 그림자의 너비가 업데이트됩니다.
  4. 추가된 단어 구분: 그림자를 위한 구분 단어로, 텍스트 영역과 동일하게 구분합니다(매우 긴 단어의 경우 구분).

공간과 관련된 몇 가지 문제가 남아 있습니다.이중 공간에 대한 해결책이 보이지 않습니다. 그림자에 단일 공간으로 표시됩니다(html 렌더링).공백이 깨져야 하므로 &nbsp;를 사용하여 이 값을 이동할 수 없습니다.또한 텍스트 영역은 공백 뒤에 줄 바꿈을 표시합니다. 공백이 없을 경우 이전 점에서 줄 바꿈을 표시합니다.제안을 환영합니다.

수정된 코드:

(function ($) {
    $.fn.autogrow = function (options) {
        var $this, minHeight, lineHeight, shadow, update;
        this.filter('textarea').each(function () {
            $this = $(this);
            minHeight = $this.height();
            lineHeight = $this.css('lineHeight');
            $this.css('overflow','hidden');
            shadow = $('<div></div>').css({
                position: 'absolute',
                'word-wrap': 'break-word',
                top: -10000,
                left: -10000,
                width: $this.width(),
                fontSize: $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize: 'none'
            }).appendTo(document.body);
            update = function () {
                shadow.css('width', $(this).width());
                var val = this.value.replace(/&/g, '&amp;')
                                    .replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/\s/g,'&nbsp;');
                if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
                shadow.html(val);
                $(this).css('height', Math.max(shadow.height(), minHeight));
            };
            $this.change(update).keyup(update).keydown(update);
            update.apply(this);
        });
        return this;
    };
}(jQuery));

SpYk3 코드축소 크기를 위해 추가된 HH.

function get_height(elt) {
    return elt.scrollHeight + parseFloat($(elt).css("borderTopWidth")) + parseFloat($(elt).css("borderBottomWidth"));
}

$("textarea").keyup(function(e) {
    var found = 0;
    while (!found) {
        $(this).height($(this).height() - 10);
        while($(this).outerHeight() < get_height(this)) {
            $(this).height($(this).height() + 1);
            found = 1;
        };
    }
});

이것은 나에게 더 잘 작용했습니다.

$('.resiText').on('keyup input', function() { 
$(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
});
.resiText {
    box-sizing: border-box;
    resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="resiText"></textarea>

사람들은 해결책을 너무 많이 생각하는 것 같아요

이렇게 해야 합니다.

  $('textarea').keyup(function()
  {
    var 
    $this  = $(this),
    height = parseInt($this.css('line-height'),     10),
    padTop = parseInt($this.css('padding-top'),     10),
    padBot = parseInt($this.css('padding-bottom'),  10);

    $this.height(0);

    var 
    scroll = $this.prop('scrollHeight'),
    lines  = (scroll  - padTop - padBot) / height;

    $this.height(height * lines);
  });

이것은 긴 줄뿐만 아니라 줄 바꿈에서도 작동합니다.점점 더 커지고 작아집니다.

이것은 나에게 완벽하게 잘 작동했습니다.

 $(".textarea").on("keyup input", function(){
            $(this).css('height', 'auto').css('height', this.scrollHeight+ 
       (this.offsetHeight - this.clientHeight));
   });

사용해 보십시오.

  $('textarea[name="mytextarea"]').on('input', function(){
    $(this).height('auto').height($(this).prop('scrollHeight') + 'px');
  });

작동하는 것처럼 보이는 이 jquery 기능을 작성했습니다.

하지만 min-height는 css로 지정해야 하며, 일부 코딩을 하고 싶지 않은 경우에는 두 자리 길이여야 합니다.ie 12ppm;

$.fn.expand_ta = function() {

var val = $(this).val();
val = val.replace(/</g, "&lt;");
val = val.replace(/>/g, "&gt;");
val += "___";

var ta_class = $(this).attr("class");
var ta_width = $(this).width();

var min_height = $(this).css("min-height").substr(0, 2);
min_height = parseInt(min_height);

$("#pixel_height").remove();
$("body").append('<pre class="'+ta_class+'" id="pixel_height" style="position: absolute; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; width: '+ta_width+'px; height: auto;"></pre>');
$("#pixel_height").html(val);

var height = $("#pixel_height").height();
if (val.substr(-6) == "<br />"){
    height = height + min_height;
};
if (height >= min_height) $(this).css("height", height+"px");
else $(this).css("height", min_height+"px");
}

Reigel이 게시한 플러그인을 사용하는 모든 사용자는 Internet Explorer에서 실행 취소 기능을 사용할 수 없습니다(데모를 참조하십시오).

만약 이것이 당신에게 문제가 된다면, 저는 @richsage가 게시한 플러그인을 대신 사용하는 것을 제안합니다. 왜냐하면 그것은 이 문제로 고통받지 않기 때문입니다.자세한 내용은 텍스트 크기 조정 영역 검색의 두 번째 글머리 기호를 참조하십시오.

닐 젠킨스의 출판물인 "만들어진 텍스트 영역 확장 Elease"를 기반으로 한 매우 멋진 프로젝트도 있습니다.

저는 애니메이션과 자동 축소를 원했습니다.그 조합은 분명히 어렵습니다. 왜냐하면 사람들이 꽤 강력한 해결책을 생각해냈기 때문입니다.다중 텍스트 영역 방지 기능도 만들었습니다.그리고 그것은 jQuery 플러그인만큼 터무니없이 무겁지 않습니다.

저는 vSync의 답변(및 그의 개선 사항)에 기반을 두고 있습니다. http://codepen.io/anon/pen/vlIwj 은 저의 개선 사항에 대한 코드펜입니다.

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

body{ background:#728EB2; }

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
  transition:all 1s;
  -webkit-transition:all 1s;
}

제이에스

var rowheight = 0;

$(document).on('input.textarea', '.autoExpand', function(){
    var minRows = this.getAttribute('data-min-rows')|0,
        rows    = this.value.split("\n").length;
    $this = $(this);
    var rowz = rows < minRows ? minRows : rows;
    var rowheight = $this.attr('data-rowheight');
    if(!rowheight){
      this.rows = rowz;
      $this.attr('data-rowheight', (this.clientHeight  - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))/ rowz);
    }else{
      rowz++;
      this.style.cssText = 'height:' + rowz * rowheight + 'px'; 
    }
});

이것에 대한 많은 답이 있지만 저는 매우 간단한 것을 찾았습니다, 텍스트 영역에 키업 이벤트를 첨부하고 입력 키를 확인합니다. 키 코드는 13입니다.

keyPressHandler(e){ if(e.keyCode == 13){ e.target.rows = e.target.rows + 1; } }

이렇게 하면 텍스트 영역에 다른 행이 추가되고 CSS를 사용하여 너비를 스타일할 수 있습니다.

녹아웃을 사용하여 이를 달성하려고 한다고 가정해 보겠습니다.방법:

페이지 내:

<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>

뷰 모델에서:

self.GrowTextArea = function (data, event) {
    $('#' + event.target.id).height(0).height(event.target.scrollHeight);
}

이 기능은 저처럼 녹아웃으로 만든 텍스트 영역이 여러 개인 경우에도 작동합니다.

간단한 솔루션:

HTML:

<textarea class='expand'></textarea>

JS:

$('textarea.expand').on('input', function() {
  $(this).scrollTop($(this).height());
});
$('textarea.expand').scroll(function() {
  var h = $(this).scrollTop();
  if (h > 0)
    $(this).height($(this).height() + h);
});

https://fiddle.jshell.net/7wsnwbzg/

가장 간단한 해결책:

html:

<textarea class="auto-expand"></textarea>

CSS:

.auto-expand {
    overflow:hidden;
    min-height: 80px;
}

js(jquery):

$(document).ready(function () {
 $("textarea.auto-expand").focus(function () {
        var $minHeight = $(this).css('min-height');
        $(this).on('input', function (e) {
            $(this).css('height', $minHeight);
            var $newHeight = $(this)[0].scrollHeight;
            $(this).css('height', $newHeight);
        });
    });       
});

순수 JS를 포함한 솔루션

function autoSize() {
  if (element) {
    element.setAttribute('rows', 2) // minimum rows
    const rowsRequired = parseInt(
      (element.scrollHeight - TEXTAREA_CONFIG.PADDING) / TEXTAREA_CONFIG.LINE_HEIGHT
    )
    if (rowsRequired !== parseInt(element.getAttribute('rows'))) {
      element.setAttribute('rows', rowsRequired)
    }
  }
}

https://jsfiddle.net/Samb102/cjqa2kf4/54/

이것이 제가 사용하게 된 해결책입니다.저는 인라인 솔루션을 원했고, 지금까지 이 솔루션이 잘 작동하는 것 같습니다.

<textarea onkeyup="$(this).css('height', 'auto').css('height', this.scrollHeight + this.offsetHeight - this.clientHeight);"></textarea>


function autoResizeTextarea() {
  for (let index = 0; index < $('textarea').length; index++) {
    let element = $('textarea')[index];
    let offset = element.offsetHeight - element.clientHeight;
    $(element).css('resize', 'none');
    $(element).on('input', function() {
      $(this).height(0).height(this.scrollHeight - offset - parseInt($(this).css('padding-top')));
    });
  }
}

https://codepen.io/nanachi1/pen/rNNKrzQ

이것은 효과가 있을 것입니다.

@Georgie Ivankin은 논평에서 제안을 했고, 저는 그것을 성공적으로 사용했습니다 :) -- 하지만 약간의 변화는 있었습니다.

$('#note').on('keyup',function(e){
    var maxHeight = 200; 
    var f = document.getElementById('note'); 
    if (f.clientHeight < f.scrollHeight && f.scrollHeight < maxHeight ) 
        { f.style.height = f.scrollHeight + 'px'; }
    });

최대 높이 200px에 도달하면 팽창을 멈춥니다.

오래된 질문이지만 다음과 같은 방법을 사용할 수 있습니다.

html:

<textarea class="text-area" rows="1"></textarea>

jquery:

var baseH; // base scroll height

$('body')
    .one('focus.textarea', '.text-area', function(e) {
        baseH = this.scrollHeight;
    })
    .on('input.textarea', '.text-area', function(e) {
        if(baseH < this.scrollHeight) {
            $(this).height(0).height(this.scrollHeight);
        }
        else {
            $(this).height(0).height(baseH);
        }
    });

이렇게 하면 자동 크기 조정이 클래스 "텍스트 영역"이 있는 모든 텍스트 영역에 적용됩니다.또한 텍스트가 제거되면 축소됩니다.

jsfidle:

https://jsfiddle.net/rotaercz/46rhcqyn/

언급URL : https://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery

반응형
저작자표시

'programing' 카테고리의 다른 글

jooq jsonArrayAgg 쿼리 mariadb/mysql은 항상 "SQL 구문의 오류" 예외를 받습니다.  (0) 2023.08.20
에코에서 줄 바꿈 방지  (0) 2023.08.20
MySQL 워크벤치 대 phpMyAdmin  (0) 2023.07.31
Node.js 인증마다 사용할 환경별 구성 설정  (0) 2023.07.31
jQuery 템플릿 엔진  (0) 2023.07.31

'programing'의 다른글

  • 현재글jQuery를 사용하여 텍스트 영역 자동 확장

관련글

댓글

티스토리툴바