입력 HTML 요소의 너비를 콘텐츠의 크기와 일치하도록 계산하는 방법은 무엇입니까?

Question

입력 HTML 요소의 너비가 콘텐츠 크기와 일치하도록 계산하는 방법은 무엇입니까? 이미 사용자 유형으로 즉시 입력을 업데이트 :

: 그것은 일부 문자가 다른 사람보다 긴 것을 고려 사실을 고려하지 않기 때문에

<input type='text' onkeydown='this.size=this.value.length' /> 

그러나이 완전히 정확하지 않는 것 내가 일부 "W"문자를 입력하면 크기가 충분하지 않습니다

• 일부 "L"문자를 입력하면
• 나는 점점 더 많은 공백을 얻을 것이다

진행 방법?

추신 : 왜 이것을하고 싶습니까? (삭제 된 답변에서 이미 답변 했습니까?) 저는 대괄호 내용을 입력 (예 : [user]는 [years] old)으로 바꿔야합니다. 나는 문장이 무엇인지 알지 못한다. 그래서 나는 입력에 대해 적당한 길이를 알지 못한다. 그리고 나는 그것을 너무 많이 공백을 피하면서 한 줄로 읽을 수있게하고 싶다.

Answer 1

컨텍스트의 (숨겨진) 캔버스와 measureText() 메서드를 사용하여 문자열의 너비를 얻을 수 있습니다.

편집 :

이 fast enough을 찾습니다.

Answer 2

첫째, ...

input, 
#input-helper { 
    display: inline; 
    font-size: 14px; 
    font-family: serif; 
    line-height: 16px; 
} 

#input-helper { 
    position: absolute; 
    top: -10000px; 
} 

가 ... 다음 몇 가지 자바 스크립트를 사용 ...

var div = document.createElement("div"); 
div.id = "input-helper"; 
document.body.appendChild(div); 

var input = document.querySelector("input"); 

input.addEventListener("keyup", function() { 
    div.textContent = this.value; 
    input.style.width = div.offsetWidth + "px"; 
});​ 

jsFiddle 일부 CSS를 정의합니다.

input 요소의 적절한 시작 너비를 선택하는 것이 좋습니다.

Answer 3

jQuery를 사용하는 것이 문제가되지 않는다면, 여기에 데모를 넣어서 jsFiddle을 작성하십시오. 그것은 당신이 원하는 것을 수행하는 Autoexpand.js 파일을 사용합니다. 바이올린의 마지막 예를 확인하십시오.

일부 세부 사항은 :

1. 이 .keyup 가능한 가장 빠른 응답 .keypress을 기반으로.
2. 상자에 붙여 넣은 HTML 마크 업을 고려합니다. 줄 바꿈 같은 것들이 처리됩니다.
3. 소스 파일은 글꼴에 관한 모든 것을 고려하여 스마트 처리를 보여줍니다.

또한 jsFiddle 샌드 박스는 IE8에서 깨진 이후 피싱의 페이스트 인 버전을 다운로드하는 링크가 jsFiddle에 포함되어 있습니다. 그것은 IE7에서도 마찬가지입니다.

Answer 4

첫째 :이 당신이

<div id="calcsize" style="display:none;"></div> 

이 두 번째로 원하는 위치 div에 추가이 기능을 사용

function getWidthof(txt) 
{ 
    $('#calcsize').empty().append(txt); 
    return $('#calcsize').width(); 
}