입력 된 텍스트에 따라 텍스트 필드 너비를 늘리는 방법은 무엇입니까?

Question

사용자가 텍스트를 입력하면 자동으로 입력 텍스트 필드의 너비를 늘리고 싶습니다. 그러나 그것을하는 방법. 도와주세요 .Jquery 또는 javascript를 사용할 수 있습니까?

감사합니다.

Answer 1

시도 :

<script> 
function adjustWidth(obj) { 

    obj.style.width = (obj.value.length) * 7.3 + "px"; 
} 
</script> 
<input type="text" onkeypress="adjustWidth(this)"> 

그러나 이것은 당신이 바로 그것을 할 수 있습니다,

Answer 2

당신은 문자의 폭만큼 정확하게 증가 할 수없는

DEMO

<input style="width:100px" onkeyup="var len = this.value.length; 
if (len>10) { 
    this.style.width=(parseInt(this.style.width)+10)+'px'; 
}" /> 

Answer 3

폭과 같은 의미가 서로 다릅니다. 당신은 내가 모든 문자에 대한 필드 크기가 10px로 증가하는 것을 가정하고 볼 수 있듯이

하지만 여전히, 당신은이

$("input:text").keyup(function() { 
    $(this).css('width', $(this).val().length*10); 
}); 

Demo 처럼 뭔가를 할 수 있습니다. 모든 문자에 맞는 올바른 배급을 할당하는 것은 매우 어렵습니다. 이와

Answer 4

사실 텍스트 크기, 글꼴 등에 따라 달라집니다. 텍스트 상자와 같은 폰트로 화면 밖으로 절대 위치에있는 div를 열고 keyup에서 텍스트 상자의 텍스트로 채우십시오. 그런 다음 해당 div의 너비 (텍스트를 준수 함)를 가져 와서 텍스트 상자를 그 너비로 설정합니다.

div는 화면을 벗어나야하며 (왼쪽 : -9999px) 숨겨 지거나 (표시 : 없음) 브라우저가 너비를 계산하기 위해 텍스트를 렌더링해야하므로 작동하지 않아야합니다. 또한 div의 텍스트를 텍스트 상자 내용과 뒤 공백으로 설정하면 텍스트 상자가 표시되는 키와 업데이트되는 폭 사이의 지연을 고려하여 텍스트 상자가 항상 한 자보다 더 큰지 확인하는 데 도움이됩니다.

중단 후 텍스트 공간과 함께 작동하는 수정 된 버전의 James Padolsey의 JQuery Autoresize 스크립트를 게시하여 먼저 너비를 최대 크기로 조정 한 다음 텍스트가 래핑 된 후 높이를 조정합니다. 그것은 정확히 당신이 찾고있는 것이 아니지만 도움이 될 수 있습니다.