Question

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

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

我在彼此旁边有两个div。左边的div包含标签，右边的div包含输入字段。

有人可以告诉我它是如何做到的或告诉我如何计算div的宽度？（假设带有标签的div只包含纯文本+删除标签图像）

修改

我让完整的编辑器以类似的方式工作。我唯一挣扎的是在用户添加标签（或删除标签）后调整输入字段的大小。

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的初始宽度中减去该标记的宽度。

我不知道这是否就是这样做的，但这似乎是一个不错的方法。

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

2 个答案: