HTML入力内のテキストの正確な幅を取得する方法は？

Question

だから、私はinputを持っていて、その内容にそのwidthを調整したい。今のところ、私はこのようなコードを使用します。これは、デスクトップ用OK作品

var adjustWidthToContent = function() 
 
{ 
 
\t var inputLength = $(this).val().length; 
 
\t // the minimum 1em width allows to start typing when the input is empty 
 
\t $(this).width(Math.max(1, inputLength*0.7) + "em"); 
 
}; 
 
$("input").on("input",adjustWidthToContent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type='text' />

を、私はこれをより正確にしたいと思います（0.7係数が一つの「ハック」と実際の幅を計算するものは、異なるシンボルについて明らかに異なる）。複数の記号を入力すると、ギャップが拡大することがわかります。固定は、私が余分なスペースを必要としないモバイルインタフェースに特に役に立ちます。input要素の空の部分が占有します。

明らかに、inputLength以外のものを使用する必要があります。 input内のテキストの「実際の」幅を取得するにはどうすればよいですか？

---

PSは、ここでの提案に基づいて、私が使用したものです：

$.fn.textWidth = function() { 
 
\t if (!$.fn.textWidth.fakeEl) 
 
\t \t $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
 
\t $.fn.textWidth.fakeEl.text(this.val() || this.text()).css('font', this.css('font')); 
 
\t return $.fn.textWidth.fakeEl.width(); 
 
}; 
 
var adjustWidthToContent = function() 
 
{ 
 
\t var textWidth = jQuery(this).textWidth(); 
 
\t var defaultWidth = 20; 
 
\t $(this).width((textWidth || defaultWidth) + 'px'); 
 
}; 
 
$("input").on("input",adjustWidthToContent).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type='text' />

PPSこれはしかし、適用可能なので、いくつかのテキストフィールドであることをadjustWidthToContentためのいくつかの工夫が必要ありません。

Answer 1

解決策は、偽のスパンを作成し、入力されたテキストを内側に置き、このスパンのサイズを取得して入力ボックスに適用することです。

ユーザーが「スペース」を押して別の単語に移動しても入力がうまくいかない場合は、「スペース」を確保するために7px以上を配置します。

また、内部に何もない場合、入力のデフォルトサイズは50pxになると定義しました。

Htmlの

<input id="my-input" type='text' /> 

JS

$.fn.textWidth = function (text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

$('#my-input').on('input', function() { 
    var textWidth = $(this).textWidth(); 
    var defaultValue = 50; 
    $('#' + this.id).width((textWidth == 0 ? defaultValue : textWidth + 7) + 'px'); 
}).trigger('input'); 

私はこのポストの答えの1以下これをした：Calculating text width

は、それはあなたのお役に立てば幸い！乾杯。