如何根据输入的“值”属性扩展输入 text/number 的长度？

Question

我有一个 form 用于修改 SQL table 的值。我可以使用 PHP 轻松地填充所有内容；但是，我在正确调整 input 字段大小方面遇到了问题。我希望有比暴力强制 CSS 以我想要的方式工作更简单的方法...

PHP/HTML

echo "<table class='modify woSub'>";
echo "<tr><th>KeyID</th><th>Rx Number</th><th>Name</th><th>Alt Name</th><th>Patient</th><th>Prescriber</th><th>Dose/Pill</th>
<th>Dose Metric</th><th colspan='2'>Quantity / Frequency</th><th class='box'>AM</th><th class='box'>Noon</th><th class='box'>PM</th>
<th class='box'>Bed</th><th class='box'>PRN</th><th>Last Fill</th><th>Pills Filled</th></tr>";
echo "<form class='modifyForm' action='modify.php' method='post'>";
$sql = "SELECT * FROM prescriptions WHERE patient = '$patient' ORDER BY rxPrimeName";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "<tr>";
        echo "<td><input type='text' inputmode='numeric'  value='" . $row['keyID'] . "' name='keyID' disabled/></td>";
        echo "<td><input type='text' inputmode='numeric'  value='" . $row['rxID'] . "' name='rxID'/></td>";
        echo "<td><input type='text' value='" . $row['rxPrimeName'] . "' name='rxPrimeName'/></td>";
        echo "<td><input type='text' value='" . $row['rxAltName'] . "' name='rxAltName'/></td>";
        echo "<td><input type='text' value='" . $patient . "' name='patient' disabled/></td>";
        echo "<td><input type='text' value='" . $row['prescriber'] . "' name='prescriber'/></td>";
        echo "<td><input type='text' inputmode='numeric' value='" . $row['dpp'] . "' name='dpp'/></td>";
        echo "<td><input type='text' value='" . $row['dppMetric'] . "' name='dppMetric'/></td>";
        echo "<td><input class='split' type='text' inputmode='numeric'  value='" . $row['frequency'] . "' name='frequency' style='border-right: none !important'/></td>";
        echo "<td><input class='split' type='text' value='" . $row['freqMetric'] . "' name='freqMetric' style='border-left: none !important'/></td>";
        echo "<td><input type='checkbox' name='am' value='am' /></td>";
        echo "<td><input type='checkbox' name='pm' value='noon' /></td>";
        echo "<td><input type='checkbox' name='pm' value='pm' /></td>";
        echo "<td><input type='checkbox' name='bed' value='bed' /></td>";
        echo "<td><input type='checkbox' name='prn' value='prn' /></td>";
        echo "<td><input type='date' value='" . $row['lastFill'] . "' name='lastFill'/></td>";
        echo "<td><input type='text' inputmode='numeric' value='" . $row['pills'] . "' name='pills'/></td>";
        echo "</tr>";
    }
}
echo "</form>";
echo "</table>";

CSS

table {
    border-collapse: collapse;
    width: 1400px;
}

th,
td {
    border: 1px solid white;
    border-collapse: collapse;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}
th {
    padding: 5px 10px;
}
td>input {
    width: 85%;
    margin: 5px;
}
.box {
    width: 10px;
}
.split {
    width: 30px;
    text-align: center;
}

这是我正在使用的PHP>Table>Form。不，我还没有放入 submit 部分，对此我不太担心。我现在只是在研究美学。

这是它显示的内容的片段：

IMGUR Image

如果您查看前 4 个 columns，这就是我想要适应的区域。我希望这一切都适合最大值的大小，有一点点 padding（比如 2-5px）。

我在网上找到的所有内容都是关于如何在输入时自动展开输入的，但我正在尝试根据被推入 [=30] 的 php 值来实现=] attribute.

Answer 1

这里有点复杂javascript方法。这个想法是创建一个与输入字段具有完全相同样式的元素。然后从按列排序的每个输入字段中加载字符串并找到最长的一个。然后设置每列的输入宽度。

const setWidth = (() =>
{
  //clone style from <input> into our hidden div
  const div = document.createElement("div"),
        selector = '.modify input[type="text"]'; //input fields

  div.className = "hiddenBox";
  for(let i = 0, style = getComputedStyle(document.querySelector(selector)); i < style.length; i++)
    div.style[style[i]] = style[style[i]]; //copy all styles into hidden div

  document.body.appendChild(div);

  return () =>
  {
    let max = [];
    for(let i = 0, input = document.querySelectorAll(selector); i < input.length; i++)
    {
      div.textContent = input[i].value; //load text into hidden div
      if (div.clientWidth > ~~max[input[i].parentNode.cellIndex])
        max[input[i].parentNode.cellIndex] = div.clientWidth; //record widest size
    }
    for(let i = 0, box = document.querySelector(".modify"); i < max.length; i++)
      max[i] && box.style.setProperty("--width"+(i+1), max[i] + "px"); //set CSS variable for input width for each column
  }
})();

setWidth(); //set <input> width



//ignore everything below

generateRows(10) //add 10 rows
function generateRows(num)
{
  // generate additional rows
  for(let i = 1, tr = document.querySelector(".modify tr:not(:first-child)"); i < num; i++)
    tr.parentNode.appendChild(tr.cloneNode(true));

  randText(); //generate text
}

function randText()
{
  for(let i = 0, input = document.querySelectorAll('.modify input[type="text"]'); i < input.length; i++)
  {
    input[i].value = "";
    let len = ~~(Math.random() * 20 + 1);
    while(input[i].value.length < len)
    {
      input[i].value += String.fromCharCode((~~(Math.random() * 2) ? 97 : 65) + ~~(Math.random() * 26));
      if (!~~(Math.random() * 10))
        input[i].value += " ";
    }
  }
  setWidth();
};

.modify td:nth-child(1) input {width: var(--width1);}
.modify td:nth-child(2) input {width: var(--width2);}
.modify td:nth-child(3) input {width: var(--width3);}
.modify td:nth-child(4) input {width: var(--width4);}
.modify td:nth-child(5) input {width: var(--width5);}
.modify td:nth-child(6) input {width: var(--width6);}
.modify td:nth-child(7) input {width: var(--width7);}
.modify td:nth-child(8) input {width: var(--width8);}
.modify td:nth-child(9) input {width: var(--width9);}
.modify td:nth-child(10) input {width: var(--width10);}
.modify td:nth-child(17) input {width: var(--width17);}

.hiddenBox
{
  position: absolute !important;
  top: -200000vh !important;
  width: unset !important;
  white-space: pre !important;
  padding: initial !important; /* delete this if some text doesn't fit */
  border: 0 !important; /* delete this if some text doesn't fit */
}

<button onclick="randText()">Generate again</button>

<table class='modify woSub'>
<tr><th>KeyID</th><th>Rx Number</th><th>Name</th><th>Alt Name</th><th>Patient</th><th>Prescriber</th><th>Dose/Pill</th>
<th>Dose Metric</th><th colspan='2'>Quantity / Frequency</th><th class='box'>AM</th><th class='box'>Noon</th><th class='box'>PM</th>
<th class='box'>Bed</th><th class='box'>PRN</th><th>Last Fill</th><th>Pills Filled</th></tr>
<form class='modifyForm' action='modify.php' method='post'>
  <tr>
    <td><input type='text' inputmode='numeric' value='' name='keyID' disabled/></td>
      <td><input type='text' inputmode='numeric'  value='' name='rxID'/></td>
      <td><input type='text' value='' name='rxPrimeName'/></td>
      <td><input type='text' value='' name='rxAltName'/></td>
      <td><input type='text' value='' name='patient' disabled/></td>
      <td><input type='text' value='' name='prescriber'/></td>
      <td><input type='text' inputmode='numeric' value='' name='dpp'/></td>
      <td><input type='text' value='' name='dppMetric'/></td>
      <td><input class='split' type='text' inputmode='numeric'  value='' name='frequency' style='border-right: none !important'/></td>
      <td><input class='split' type='text' value='' name='freqMetric' style='border-left: none !important'/></td>
      <td><input type='checkbox' name='am' value='am' /></td>
      <td><input type='checkbox' name='pm' value='noon' /></td>
      <td><input type='checkbox' name='pm' value='pm' /></td>
      <td><input type='checkbox' name='bed' value='bed' /></td>
      <td><input type='checkbox' name='prn' value='prn' /></td>
      <td><input type='date' value='' name='lastFill'/></td>
      <td><input type='text' inputmode='numeric' value='' name='pills'/></td>
      </tr>
</form>
</table>

如何根据输入的“值”属性扩展输入 text/number 的长度？

How to expand the length of an input text/number based on it's `value` attribute?

html

css

php

forms

html-table