如何在表單編輯字段中獲取上標

我使用html和php創建填字遊戲類型拼圖。我有一個表單編輯字段，用戶可以鍵入1個字母。編輯字段位於表格單元格中。如何在表單編輯字段中獲取上標

 <td><input type='text' maxlength='1' name='$identifier' value='$value' text-align:center;' size='1px'></td>

由於這是一個填字遊戲，我希望能夠在上標的表格單元格的左上角顯示一個數字。我一直試圖把它放在帶有sup標籤的輸入單元格之前，但是這將它放在編輯字段之外。我也玩過「佔位符」屬性，但是這會讓你輸入時號碼消失，這不是我所追求的效果。如何在我的表格單元格中獲得永久性的上標數字？我想要一些幫助！

來源

2016-12-17 Wanda Embar

使用CSS這將是這樣的。將''位置設置爲'relative'，並在''內創建一個範圍標記，其中的數字就像是''，並使其位置爲'absolute'和'top：0; left：0;'so它會放在'' –

的左上角謝謝馬克！我沒有考慮使用跨度。去嘗試一下。感謝你的幫助！ –

頂部：0;左：0;把它放在我整個屏幕的左上角，但只有絕對的位置，它就像一個魅力。非常感謝！！！！！ –

如果使用跨度

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); 
 
}

<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>

https://jsfiddle.net/6268ugbd/

來源

2016-12-17 02:52:31

非常感謝Mark！ –

標記爲已回覆關閉此主題。 –

如何在表單編輯字段中獲取上標

回答

相關問題