2013-08-28 5 views
0

이와같이 http://www.jacklmoore.com/autosize/ 하지만 텍스트가 아닌 입력. input.For 예 작동하지 않은 것 :어떻게하면 텍스트 확장이 아닌 자동 확장 입력을 할 수 있습니까?

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> 
<script src='jss/jquery.autosize.js'></script> 
     <script> 
      $(function() { 
       $('.normal').autosize(); 
      }); 
     </script> 
    <body> 
     <textarea class='normal'></textarea> 
    </body> 

나는 고정 폭의 입력을 도움 말이죠, 높이

<input class='normal'/> 

도움말 PLS

+0

http://jsbin.com/ahaxe – Alvaro

+0

예, 고정 폭, 높이 변경 입력 –

답변

0

당신은 contenteditable DIV를 사용할 수 변경 :

<div contenteditable="true" class="normal"></div> 
.normal { 
    width: 150px; 
    min-height: 16px; 
    overflow: hidden; 
    padding: 3px 3px 2px; 
    border: 1px solid #aaa; 
    border-radius: 2px; 
    font-size: 11px; 
    font-family: Helvetica,Arial; 
} 

jsFiddle는 : http://jsfiddle.net/z4EX6/

0

이 사용할 수있는 것입니다 : 문자 폭을 계산하는 데 사용 0.5

$(".normal").bind("keydown", function() { 
     var charWidth = $(this).css("font-size").replace("px", "") * 0.5; 
     var newWidth = (($(this).val().length + 10) * charWidth); 
     var minWidth = 100; 
     var maxWidth = 1000; 
     if (newWidth > minWidth && newWidth < maxWidth) { 
      $(this).width(newWidth); 
     } 
    }); 

요소가 사용하는 글꼴의 종류에 따라 달라집니다. 그러나 0.5는 대부분의 글꼴 유형에 적합해야합니다.

최소 너비와 최대 너비를 지정하면 컨트롤 폭이 범위를 벗어나지 않게됩니다.

관련 문제