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

SO tag-editor calculating width of input

本文关键字：输入 计算 标签 编辑器 SO      更新时间：2023-09-26

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

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

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

有人能告诉我如何做到这一点，或者告诉我如何计算一个div的宽度?(假设带有标签的div只包含纯文本+删除标签图像)

编辑:

我有一个完整的编辑器工作在一个类似的方式，所以做它。我唯一在挣扎的是在用户添加标签(或删除一个)后调整输入字段的大小。

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

演示工作

它只是使用标签中的图像来存储删除按钮，并且在文本和图像之间有一个轻微的边距来保持一些空间。标签被浮动，以保持彼此之间的距离。

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

你知道你的初始宽度，如果你把你在<span>或类似的东西中添加的标签包装起来，你可以得到那个标签的宽度。所以每次你添加一个标签时你都要从容器div的初始宽度中减去该标签的宽度。

我不知道这里是不是这样做的，但这似乎是一个很好的方法。

相关文章：