table> tbody> tr> td> div> переключаемые span и textbox без изменения размера таблицы?

Question

Итак, у меня есть этот контроль, который я пытаюсь сделать. Это встроенный текстовый редактор для веб-сайта, и основная идея заключается в том, что он будет отображать метку с некоторым текстом, а при нажатии на текст метка исчезает и на ее месте появляется текстовое поле, так что пользователь может редактировать данные.

Общий макет выглядит примерно так (идентификаторы и события удалены для ясности):

<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>

Так что проблема в том, что эта установка довольно суетливая и изменяет размеры ячеек, когда диапазон исчезает и появляется вход. Моя общая цель - установить CSS на div, span и / или input, чтобы эта вещь оставалась неподвижной. Мне немного повезло с позицией: абсолютная на 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>
  <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, вы можете прослушивать и устанавливать высоту так же легко (с .height & .offsetHeight, соответственно).

Удачи!

Answer 4

Что-то не так с настройкой ширины / высоты элемента div или td? Не связывайтесь с позиционированием.