我需要使用 CSS 和 jQuery 在不更改其位置或 tds 宽度的情况下使输入字段溢出 td

Posted 2023-03-06

【中文标题】我需要使用 CSS 和 jQuery 在不更改其位置或 tds 宽度的情况下使输入字段溢出 td

【英文标题】：I need to make an input field overflow a td without changing its position or the tds width using CSS and jQuery

【发布时间】：2015-02-16 06:13:03

【问题描述】：

我需要在焦点集中时放大输入字段，而包含的 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/

希望你能帮助我。

【问题讨论】：

在 Chrome 中似乎没有移动到我。

我正在使用 Chrome，文本框在焦点上离开了表格。您是否试图使文本框更宽，而不是更改列的宽度？

我更新了小提琴 - 如果你有一排有 2 行的输入，则可以更清楚地看到。

【参考方案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');
)

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

【讨论】：

请注意，这可以让您保持居中对齐。仅供参考，这是您的旧代码和上面代码的差异：filediff.net/d/O2oS07sIqU

【参考方案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>

【参考方案3】：

尝试用严格的 CSS 替换 javascript。

我做的一件事是让 td 单元格文本对齐：左。这是目前唯一真正的区别。切换到绝对位置时出现移动的原因是因为它试图将元素对齐到中心，但是绝对元素没有被测量或居中。

这是 CSS。

table td
position: relative;
overflow: visible;
text-align: left;


.Bemerkung:focus
    width: 196px;
    position: absolute;
    z-index: 10000;

如果您需要 text-align: center 请告诉我，我会寻找不同的解决方案。