글꼴을 크기 조정할 수있는 반응 형 TextBox/Textarea를 만드는 방법은 무엇입니까?

Question

응답 성있는 텍스트 상자/텍스트 영역을 만들고 싶습니다. 텍스트 상자/텍스트 영역의 크기를 다시 조정하려면 내부 글꼴의 크기를 조정하십시오.

제안을 기다리는 중입니다.

감사의 말 전진. 당신의 문제에 대한

Answer 1

당신은 나에게 제안을주는 fitext

또는

Answer 2

BigText 감사에게 많이 있습니다 자바 스크립트/jQuery 플러그인을 사용 할 수도 있습니다. 내 적절한 요구 사항은이 예제 - http://jsfiddle.net/6FTdK/과 같은 것으로,이 기능은 텍스트 상자/텍스트 영역에 필요합니다.

$('#resizable').resizable({ maxHeight: parseInt(200), maxWidth: parseInt(180), resize: function(evt, ui) {
var width1 = parseInt(ui.element.css('width')), height1 = parseInt(ui.element.css('height')); ui.element.css({ 'font-size': (width1/10)+'px', 'line-height': (height1/10)+'px' }); } });

Answer 3

당신은 당신의 사업부에 contenteditable를 사용할 수 있습니다 http://jsfiddle.net/6FTdK/97/

그런 다음 당신이 제출 아약스를 사용할 수 있습니다.

Answer 4

fiddle에 따르면 다음과 같이 공유해야합니다. 기본적으로 우리는

$('#resizable').resizable({ 
    maxHeight: parseInt(200), 
    maxWidth: parseInt(180), 
    resize: function(evt, ui) {   
     var width1 = parseInt(ui.element.css('width')), 
      height1 = parseInt(ui.element.css('height')); 
     ui.element.css({ 
      'font-size': (width1/10)+'px', 
      'line-height': (height1/10)+'px' 
     }); 
    } 
}); 

JS

div-

• HTML

  <div id="resizable"> 
      <textarea rows="4" cols="40">This is a textarea. Test for resizing</textarea> 
  </div> 
  

• CSS

  textarea { 
      width:100%; 
      height:100%; 
  } 
  
  #resizable { 
      height: 100px; 
      width: 100px; 
      font-size: 10px; 
      background: #ccc; 
  } 
  

• 내에서 전체 텍스트 영역을 둘러싸는있다