我需要使用 CSS 和 jQuery 使输入字段溢出 td，而无需更改其位置或 tds 宽度

Question

当输入字段处于焦点状态时，我需要放大输入字段，而不会放大包含的td。

在这两个字段上，进一步应该保持它们的实际位置（看看小提琴，它会移动），而不是向上或向下移动（由绝对位置引起的）。

这是我的真实状态

    $('.Bemerkung').focus(function() {
    $(this).attr('size','30');
    $(this).parent().css({'position':'absolute'});
    $(this).css({'position':'absolute'});
})
$('.Bemerkung').blur(function() {
    $(this).attr('size','5');
    $(this).removeAttr('style');
    $(this).parent().removeAttr('style');
})

http://jsfiddle.net/kazuya88/dhy0dxyy/

希望你能帮助我。

Answer 1

它与你最初拥有的相差不远：

$('.Bemerkung').focus(function() {
    oldWidth = $(this).width();
    $(this).attr('size','30');
    $(this).css({'position':'relative'});
    $(this).css({'margin-right':('-'+($(this).width()-oldWidth)+'px')});
})
$('.Bemerkung').blur(function() {
    $(this).attr('size','5');
    $(this).removeAttr('style');
    $(this).parent().removeAttr('style');
})

更新：我想我应该添加更多关于这里发生的事情的解释。这基本上是在获得焦点之前检测大小，然后增加大小并将右边距设置为新大小和旧大小之间的差异（从而使渲染器将其视为与获得焦点之前相同的"宽度"）。位置：相对是这样元素宽度不会影响 td 宽度（只要右边距设置为负）。

Answer 2

您可以使用

transform: scale(1.2)来放大它，添加transition并删除absolute位置声明。

$('.Bemerkung').focus(function() {
  $(this).css({
    'transition': 'transform 0.5s',
    'transform': 'scale(1.2)'
  });
});
$('.Bemerkung').blur(function() {
  $(this).css({
    'transform': 'scale(1)'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="weektimereg" class="recordlist" border=1 style="text-align:center;">
  <tr>
    <th style="width:110px;">sample</th>
    <th style="width:110px;">sample2</th>
  </tr>
  <tr>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
  </tr>
  <tr>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
  </tr>
</table>

Answer 3

尝试用严格的CSS替换javascript。

我做的一件事是使td单元格文本对齐：左。 这是目前唯一真正的区别。当您切换到绝对位置时，之所以有移动，是因为它试图将元素与中心对齐，但随后绝对元素不会被测量或居中。

这是 CSS。

table td{
position: relative;
overflow: visible;
text-align: left;
}
.Bemerkung:focus{
    width: 196px;
    position: absolute;
    z-index: 10000;
}

如果您需要文本对齐，请告诉我：居中，我会寻找不同的解决方案。