왜 설정 입력 너비가 내용과 정확히 일치하지 않습니까?

Question

제 목표는 HTML 입력 요소가 내용에 맞게 동적으로 변경되도록하는 것입니다. 나는 꽤 잘 작동하는 것을 가지고있다. my jsfiddle example here을 보라.

내 문제는 : 텍스트 필드에 많은 문자를 입력하면 너비가 실제로 텍스트 내용보다 특정 백분율 (또는 그 이상)이라는 것을 알 수 있습니다.

입력 필드의 마지막 "J"의 오른쪽에있는 작은 공간을 참조하십시오? 입력 내용이 텍스트 값의 끝 부분에 정확히 맞춰지기를 바랍니다. 텍스트 값이 입력에 입력되는 시간이 길수록 문제는 더욱 심각합니다.

입력의 너비는 인접한 <span> 요소의 너비로 설정합니다. 왜 내가 너비가 실제로 입력 텍스트의 너비보다 조금 더 큰지 아는 사람?

UPDATE 나는 아래의 답을 사용하여 문제를 해결하고 여기에 jQuery로 일부 작업 코드는 다음과 같습니다 http://jsfiddle.net/FwMBR/13/.

$('input').width('10px').keyup(function(){ 

    $('#a').remove(); 

    $(this).after('<span id="a">'+$(this).val()+'</span>'); 

    $('#a').css({ 
     'font-family':$(this).css('font-family'), 
     'font-size':$(this).css('font-size') 
    }); 

    $(this).width($('#a').width()); 

}); 

Answer 1

이것은 테스트 범위의 글꼴이 텍스트 상자의 글꼴과 다르기 때문에 발생합니다. 따라서 문자 너비가 일치하지 않습니다. 당신도

• 는 시험 범위의 또는
• 텍스트 상자의 글꼴 및 글꼴 크기를 찾아 시험 범위로 설정과 같은 텍스트 상자의 글꼴 및 글꼴 크기를 설정해야합니다.

후자는 더 좋아 보이지만 (텍스트 상자 글꼴을 유지함) 구현하기가 더 어려워서 this code이라고 적었습니다.

var computed = window.getComputedStyle($('input')[0]); 
$('#a').css({ 
    'font-family': computed.fontFamily, 
    'font-size': computed.fontSize 
}); 

Answer 2

사용하십시오. 원하는대로 작동합니다.

$('input').width('10px').keydown(function(){ 

    $('#a').remove(); 

    $(this).after('<span id="a">'+$(this).val()+'</span>'); 

    $(this).width($('#a').width()); 

});; 

** 필드 및 HTML 페이지에서 같은 글꼴을 사용하십시오.

Answer 3

http://jsfiddle.net/PeQXJ/

CSS :

.myinput , body 
{ 
    font-family:"Times New Roman",Georgia,Serif; 
    font-size:14px; 
} 

HTML

<input type="text" class="myinput"> 

JS :

$('input').width('10px').keyup(function(){ 

    $('#a').remove(); 

    $(this).after('<span id="a">'+$(this).val()+'</span>'); 

    $(this).width($('#a').width()); 

});; 

Answer 4

CSS를보십시오 :

.mytext { 
    padding-right: 0px! important; 

} 

HTML :

<input type="text" class="mytext"> 

이것은`span`와`input` 글꼴이 다른 JSFIDDLE