Question

所以我有这个控制我正在尝试。它是一个网站的就地文本编辑器，其基本思想是它将显示带有一些文本的标签，当您单击文本时，标签消失，文本框出现在其中，以便用户可以编辑数据。

总体布局是这样的（为了清楚起见，删除了id和事件）：

<table>
  <tbody>
    <tr>
      <td>
         Some other cell, etc.
      </td>
      <td>
        <div>
          <span>When you click me, I'll disappear and show the input instead.</span>
          <input type="textbox" style="display:none"/>
        </div>
      </td>
    <tr>
  </tbody>
</table>

所以问题是，这个设置非常繁琐，并且当跨度消失并且输入显示时调整单元格的大小。我的总体目标是能够在div，span和/或输入上设置一些CSS，以使这个东西保持静止。我在位置上有一点点运气：在div上是绝对的，然而，文本只是溢出它的边界，并且没有在单元格内正确包裹。

由于这是一个控件，我可以根据需要移动这三个元素，或者添加其他元素，但我真的想单独留下table，tbody，tr和td标签。

有什么想法吗？

修改

最后，我有这样的事情：

.inPlaceEditor
{
    margin-right:0px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    white-space:normal;
    display:block;
    width:100%;
    height:100%;
}

.inPlaceEditor span
{
    white-space:normal;
}

.inPlaceEditor input[type="textbox"]
{
    display:none;
    width:100%;
    border:solid 0px black;
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-top:0px;
    padding-left:0px;
}

使用单击事件处理程序，如下所示：

function ShowInPlaceTextEditor(_this) {
    var div = $(_this).closest('td');
    div.css({ height: div.height(), width: div.width() });
    $(_this).hide().next().show().focus().selectAllText();
}

隐藏文本框的关联处理程序，如下所示：

function HideInPlaceTextEditor(_this) {
    $(_this).closest('td').css('height', '');
    $(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show();
}

感谢所有帮助过的人。

Answer 1

如果您可以依赖javascript，请在该单元格中的所有内容中包含div。页面加载时，获取该div渲染时的当前高度。然后，将该高度分配给样式中的div。这样，当您显示输入时，它仍应由具有指定高度的div支撑。我怀疑输入比带有文本的跨度高一点，所以你可能需要将高度提高几个像素。

Answer 2

我知道阻止细胞扩张的唯一方法就是使用它......

table { table-layout: fixed; width: 500px; }
table td { overflow:hidden; }

虽然，一个有趣的尝试是使div相对定位，然后将输入设置为绝对...

td div { position: relative; }
td div input { position: absolute; }

绝对定位的元素不会导致扩展，它们的起始位置基于第一个相对定位的父元素。

Answer 3

设置div或td元素的宽度/高度有什么问题吗？不要搞砸定位。

Answer 4

在隐藏文本并显示文本区域的功能中，您可以嗅探单元格的尺寸并调整文本框的大小以匹配。

<div>
  <span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span>
  <input id='box1' type="textbox" style="display:none"/>
</div>

<script>
  function flip(text, boxID)
  {
    var box = document.getElementById(boxID);
    var parent = text.off
    box.style.width = text.offsetParent.offsetWidth + "px";

    text.style.display = "none";
    box.style.display = "";
  }
</script>

当然，如果您的文本单独坐在一条线上，它将调整为整个容器宽度，因此您可能还想为该框设置最大宽度。

当然，如果你想使用TextArea而不是TextBox，你可以嗅探＆amp;将高度设置为easilly（分别使用.height＆amp; .offsetHeight）。

祝你好运！

表＆gt; tbody＆gt; tr> td＆gt; div>没有表调整大小的切换范围和文本框？

4 个答案: