Question

我正在使用html和php创建填字游戏类型拼图。我有一个表单编辑字段，用户可以在其中键入1个字母。编辑字段位于表格单元格中。

bash

由于它是一个填字游戏，我希望能够在上标的表格单元格的左上角显示一个数字。我一直试图将它放在带有sup标签的输入单元格之前，但是这会将它放在编辑字段之外。我也玩过“占位符”属性，但这会使你输入的数字消失，这不是我所追求的效果。如何在表格单元格中获取永久上标数字？我很乐意帮忙！

Answer 1

如果你使用span

，它会是这样的

＆＃13;

table {
  border-collapse: collapse;
}
table td {
  position: relative;
}
table td input {
  border: 1px solid #ccc;
  height: 25px;
  width: 25px;
}
table td span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 8px;
  background: rgba(255, 255, 255, 0.7);
}

＆＃13;

<table border='1'>
  <tr>
    <td><span>1</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>2</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>3</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>4</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>5</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
  </tr>
  <tr>
    <td><span>6</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>7</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>8</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>9</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>10</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
  </tr>
  <tr>
    <td><span>11</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>12</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>13</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>14</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>15</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
  </tr>
  <tr>
    <td><span>16</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>17</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>18</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>19</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>20</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
  </tr>
  <tr>
    <td><span>21</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>22</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>23</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>24</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
    <td><span>25</span>
      <input type='text' maxlength='1' name='' value='' style='  text-align:center;' size='1px'>
    </td>
  </tr>
</table>

＆＃13;

https://jsfiddle.net/6268ugbd/

如何在表单编辑字段中获取上标

1 个答案: