SOタグエディタの入力幅を計算する

Question

私はSOのような同様のタグエディタを作成しています。私にいくつかの問題を与えているのは、ユーザーがタグを選択した後にテキストボックスの幅を計算することだけです。

すべてのタグで、ユーザーが追加します。入力フィールドの横の幅を再計算しますが、正しいとは言えません。

私はお互いに2つのdivを持っています。左側のdivにはタグが含まれ、右側のdivには入力フィールドが含まれます。

誰かが私にそれを行う方法を教えてもらえますか、divの幅を計算する方法を教えてください。

編集（タグとdiv要素はプレーンテキストのみ+削除タグ画像を保持していると仮定）：私はSOそれがないと同様の方法で作業を完了し、エディタを持って

を。私が苦労しているのは、ユーザーがタグを追加した後（または削除した後）に入力フィールドのサイズを変更することだけです。非常にシンプルながらも

Answer 1

は、あなたが探しているかもしれないもののようなものです：

Working Demo

それはちょうどいくつかを保つために削除ボタンを保存するために、タグ内の画像を使用し、若干の余裕を持ってテキストとイメージの間のスペース。タグは浮かせてお互いに離れている。

あなたはSOのソースをチェックアウトすることによってそれのボタンに使用するクラスを見つけることができます。

.post-tag, .post-text .post-tag, .wmd-preview a.post-tag { 
    color: #3E6D8E; 
    background-color: #E0EAF1; 
    border-bottom: 1px solid #3E6D8E; 
    border-right: 1px solid #7F9FB6; 
    padding: 3px 4px 3px 4px; 
    margin: 2px 2px 2px 0; 
    text-decoration: none; 
    font-size: 90%; 
    line-height: 2.4; 
    white-space: nowrap; 
} 

a.post-tag:hover, .post-text a.post-tag:hover, .wmd-preview a.post-tag:hover { 
    background-color: #3E6D8E; 
    color: #E0EAF1; 
    border-bottom: 1px solid #37607D; 
    border-right: 1px solid #37607D; 
    text-decoration: none; 
} 

あなたはjQueryのまたはJavaScriptを使用して幅を得ることができる必要がありますが：

//jQuery 
var width = $('#yourTag').width(); //or $(this).width(); 

//javascript 
var tag = document.getElementById('yourTag'); 
var width = tag.width // or tag.clientWidth 

Answer 2

最初の幅がわかっていて、<span>などのタグの内側に追加するタグを囲むと、そのタグの幅を取得できます。したがって、タグを追加するたびに、コンテナdivの最初のwidhtからそのタグの幅を引くことができます。

これはこれがここで行われた方法であるかどうかはわかりませんが、これは良いアプローチに見えます。