javascript - SO标签编辑器计算输入宽度

Question

我正在创建一个类似 SO 的标签编辑器，我必须说它工作得很好。唯一给我一些问题的是在用户选择标签后计算文本框的宽度。

对于用户添加的每个标签，我都会重新计算它旁边的输入字段的宽度，但我似乎无法正确计算。

我有 2 个相邻的 div。左边的 div 包含标签，右边的 div 包含输入字段。

有人能告诉我 SO 是怎么做到的，或者告诉我如何计算 div 的宽度吗？ (假设带标签的div只放纯文本+删除标签图片)

编辑:

我有完整的编辑器，其工作方式与 SO 类似。我唯一遇到的困难是在用户添加标签(或删除标签)后调整输入字段的大小。

Answer 1

您可能正在寻找这样的东西，尽管非常简单:

Working Demo

它只是使用标签内的图像来存储删除按钮，并有轻微的边距以在文本和图像之间保留一些空间。标签也 float 以彼此远离。

您可以通过查看源找到 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