SO標籤編輯器計算輸入寬度

我正在創建一個類似於SO的標籤編輯器，它的工作狀況還不錯，我必須說。唯一給我帶來一些問題的是用戶選擇標籤後計算文本框的寬度。SO標籤編輯器計算輸入寬度

隨着用戶添加的每個標籤我重新計算旁邊的輸入字段的寬度，但我似乎無法得到它的權利。

我有2個div旁邊eachother。左邊的div包含標籤，右邊的div包含輸入字段。

有人可以告訴我如何做它或告訴我我怎麼可以計算div的寬度？（假設DIV與標籤僅持有純文本+刪除標籤圖像）

編輯：

我有完整的編輯器，以類似的方式工作作爲SO做的。我一直在努力的是在用戶添加標籤（或刪除標籤）後調整輸入字段的大小。

來源

2011-08-11 Jeroen

是這樣的你可能會尋找，雖然很簡單：

Working Demo

它只是使用的標籤內的圖像存儲刪除按鈕，並有微弱的差距保留一些文字和圖像之間的空白。標籤也浮動以保持彼此遠離。

可以發現，因此通過檢查出它的源代碼的按鍵採用類：

.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

來源

2011-08-11 15:43:51

閱讀我的編輯。這是一個非常具體的問題。 – Jeroen

@Jeroen，你有任何來源或可能的例子（jsfiddle）。如果你想計算div的寬度，應該可以用javascript或jQuery輕鬆完成。 Ala - $（'。tag：last'）。width（） –

使用.width（）有助於。這並不完美，我仍然需要添加一點，但至少輸入欄停止了下一行。 – Jeroen

那麼你知道你的初始寬度，如果你包裹你添加到<span>或類似的東西里面的標籤，你可以得到該標籤的寬度。因此，每次添加標籤時，都會從容器div的起始寬度中減去該標籤的寬度。

我不知道這是否是它在這裏完成的方式，但它似乎是一個不錯的方法。

來源

2011-08-11 15:55:54 vindia

SO標籤編輯器計算輸入寬度

回答

相關問題