如何通过HTML和JavaScript调整PHP动态赋值的只读输入框尺寸

我明白你的问题了——后端PHP给只读输入框赋值后，你尝试用像素设置尺寸，但JS总是识别为空/尺寸为0，没法调整。这大概率是因为JS执行时机太早，DOM还没完全渲染，输入框的PHP内容还没加载出来；或者直接设置像素没法适配内容长度。下面给你几个实用的HTML+JS解决方案：

方案1：CSS快速适配（简单高效） #

如果你的项目不需要兼容太老的浏览器，直接用CSS的fit-content属性就能让输入框自动适配内容宽度，还能加个最小宽度防止内容过窄：

<tr>
  <td colspan="3" align="right">Total: </td>
  <td align="right">
    <input 
      id="total" 
      readonly 
      value="<?php echo number_format($total, 2)?>"
      style="width: fit-content; min-width: 80px; padding: 2px 5px;"
    >€
  </td>
  <td></td>
</tr>

• fit-content会让输入框宽度刚好包裹住内容
• min-width确保内容很短时输入框也有足够的显示空间
• 加一点padding让内容不会紧贴输入框边缘，视觉上更舒服

方案2：JavaScript精确计算（兼容性拉满） #

如果需要兼容旧版浏览器，或者想要更精准的宽度控制，可以用JS创建一个隐藏的模拟元素，计算文本的实际宽度后再设置给输入框。关键是要等DOM完全加载后再执行：

<tr>
  <td colspan="3" align="right">Total: </td>
  <td align="right">
    <input id="total" readonly value="<?php echo number_format($total, 2)?>">€
  </td>
  <td></td>
</tr>

<script>
// 等DOM所有元素都渲染完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  const totalInput = document.getElementById('total');
  
  // 创建一个隐藏的span，用来模拟输入框的文本样式和宽度
  const tempSpan = document.createElement('span');
  // 复制输入框的字体、字号等样式，确保计算的宽度和输入框完全一致
  tempSpan.style.font = window.getComputedStyle(totalInput).font;
  tempSpan.style.visibility = 'hidden'; // 隐藏但保留尺寸
  tempSpan.style.position = 'absolute'; // 不影响页面布局
  tempSpan.textContent = totalInput.value; // 把输入框内容放进去
  
  // 把span加到页面，获取宽度后移除
  document.body.appendChild(tempSpan);
  const textWidth = tempSpan.offsetWidth;
  document.body.removeChild(tempSpan);
  
  // 设置输入框宽度，额外加10px是留一点内边距空间
  totalInput.style.width = `${textWidth + 10}px`;
});
</script>

这个方法的核心是用和输入框样式一致的span来计算文本宽度，避免输入框本身的边框、内边距影响计算结果。

方案3：动态调整函数（适合内容可能变化的场景） #

如果后续你需要通过JS动态修改输入框的值（比如重新计算总价），可以把宽度计算逻辑封装成函数，每次内容变化时调用：

<tr>
  <td colspan="3" align="right">Total: </td>
  <td align="right">
    <input id="total" readonly value="<?php echo number_format($total, 2)?>">€
  </td>
  <td></td>
</tr>

<script>
// 封装调整宽度的函数
function adjustInputWidth(inputElement) {
  const tempSpan = document.createElement('span');
  tempSpan.style.font = window.getComputedStyle(inputElement).font;
  tempSpan.style.visibility = 'hidden';
  tempSpan.style.position = 'absolute';
  tempSpan.textContent = inputElement.value;
  
  document.body.appendChild(tempSpan);
  const textWidth = tempSpan.offsetWidth;
  document.body.removeChild(tempSpan);
  
  inputElement.style.width = `${textWidth + 10}px`;
}

// 页面加载时初始化宽度
document.addEventListener('DOMContentLoaded', function() {
  adjustInputWidth(document.getElementById('total'));
});

// 后续如果修改了输入框内容，直接调用这个函数即可
// 示例：比如重新计算总价后
// totalInput.value = number_format(newTotal, 2);
// adjustInputWidth(totalInput);
</script>

内容的提问来源于stack exchange，提问作者curious