동적 텍스트 필드 크기 조정

필자가 쓰고있는 웹 응용 프로그램의 일부가 있는데, 정말 좋아 보이고 깔끔하게 만들 수있는 특별한 고통이되고 싶습니다. 텍스트, 입력 텍스트 상자 및 제출 단추가 들어있는 양식 옆에 고정 너비가있는 단추가 있습니다. 입력 상자의 너비를 화면의 너비에 따라 크기를 조정하고 싶지만 다음 줄로 조각을 떨어 뜨리지 않고 수행하는 방법을 모르겠습니다. 여기 동적 텍스트 필드 크기 조정

문제의 바이올린입니다 : http://jsfiddle.net/Yt3V2/

HTML :

<div class="wrapper"> 
    <button type="button" class="new_button">Create New</button> 
    <form name="input" action="" method="post"> 
    Search: 
    <input type="text" class="search_input"></input> 
    <input type="submit" value="Submit"></input> 
    </form> 
</div>

CSS : 제안의 많은 얻는 CSS, 밖으로 테이블을 포함

.new_button 
{ 
    float: left; 
    min-width: 120px; 
} 

.search_input 
{ 
    width: /* What could go here? */; 
}

나도 가깝지만 텍스트 상자는 여전히 잘릴 것이다. http://jsfiddle.net/G9pDw/

입력 텍스트 상자를 동적으로 크기를 조정하고 원하는 곳에 맞출 수있는 방법이 있습니까?

출처

2013-07-10 Chase Sandmann

이 question에 따르면 변경 시도 :

<input type="text" class="search_input"></input>

** 업데이트

<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>

JSFiddle

에 *************** **********

New JSfiddle

출처

2013-07-10 22:13:19

그게 정말 멋진 효과인데 (나중에 참조 할 때 기억해야 할 것입니다.) 내가 찾던 내용이 아닙니다. 필드의 현재 입력을 기준으로 크기가 조정되지만 필드에 항상 사용할 수있는 최대 공간을 차지하도록 필드를 찾고 있습니다. –

테이블로 정렬 해 보았습니까? –

업데이트 [JSfiddle] (http://jsfiddle.net/ahmedadil1000/G9pDw/1/) –

동적 텍스트 필드 크기 조정

답변

관련 문제