재개 가능한 Textarea를 구현 하시겠습니까?

StackOverflow https://stackoverflow.com/questions/149421

  •  02-07-2019
  •  | 
  •  

문제

STACKOVERFLOW는 어떻게 RESIZEable Textarea를 구현합니까?

그것이 그들이 스스로 굴린 것입니까 아니면 내 사이트의 TextAreas에 쉽게 부착 할 수있는 공개 구성 요소입니까?

나는이 질문을 발견했고 그것은 내가 원하는 것을 잘하지 못한다.

자동화-텍사스 테레아

그것은 텍스트의 자동 크기를 조정하는 것에 대해 더 많이 이야기하는 반면, 나는 당신이 위아래로 끌 수있는 작은 횡령 영역을 원합니다.

도움이 되었습니까?

해결책

StackoverFlow는 jQuery 플러그인을 사용하여 다음을 수행합니다. Textarearesizer.

이것을 확인하기에 충분히 쉽습니다 - 그냥 당기십시오. JS 사이트에서 파일.

역사적 노트 : 이 답변이 원래 작성되었을 때 WMD와 TextareAresizer는 두 개의 별도 플러그인이었으며 그 중 어느 것도 SO DEV 팀이 작성하지 않았습니다 (참조 : 참조 : 참조 : Micahwittman의 대답). 또한 사이트의 JavaScript는 읽기가 매우 쉽습니다 ... 이들 중 어느 것도 엄격하게 더 이상 사실이지만 TextareAresizer는 여전히 잘 작동합니다.

다른 팁

최근에 비슷한 기능이 필요했습니다. 라고 불린다 자동도 그리고 그것은 Amazing의 플러그인입니다 jQuery 도서관

처음에 나는 그것이 내장 된 기능이라고 믿었습니다. Wysiwym Markdown 편집기, 그러나 shog9는 정확합니다 : 그것은 전혀 구운 것이 아니라 jQuery 플러그인 TextareAresizer가 제공됩니다 (브라우저가 편집기 데모 Google Chrome 자체는 Safari 브라우저와 마찬가지로 Textareas에 확장 가능한 기능을 추가하기 때문에).

angularjs 사용 :

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

이것은 모든 Textareas가 성장/축소하도록 변형시킵니다. 특정 Textareas 만 성장/축소하려면 다음과 같이 읽을 수 있도록 상단 부분을 변경하십시오.

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

도움이되기를 바랍니다!

what about this, its work

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top