當用戶在 td 元素內的 ap 標簽內按下一個鍵時，我想觸發一些操作，這是我桌子上“td”的 HTML。
問題是，當我將keydown事件添加到每個段落元素時，我看不到任何回應。這是我如何做到的。
document.querySelectorAll('tr').forEach((row) => {
if (row.rowIndex > 0) {
row.querySelectorAll('td').forEach((cell) => {
cell.contentEditable = true;
cell.querySelectorAll('p').forEach((prg) => {
prg.addEventListener('keydown', () => {
console.log('test');
});
});
});
}
});<table>
<tr></tr>
<tr>
<td data-property="phone" contenteditable="true">
<p data-property="phone" class="sub-cell">34567890</p>
<p data-property="phone" class="sub-cell">5511525298ss</p>
<p data-property="phone" class="sub-cell">5511525298</p>
</td>
</tr>
</table>我在“td”元素上有一些其他的“keydown”事件，但是當我洗掉它們時它仍然無法正常作業。
當我使用“click”事件而不是“keydown”時，我得到了我期望的回應。
我在這里讀到https://www.w3schools.com/Jsref/event_onkeydown.asp，“p ”和表格元素支持 keydown 事件。
我需要獲取正在進行文本編輯以更新服務器資訊的 p，因此在表格單元格上添加事件對我不起作用。
我非常感謝您對此的任何幫助、閱讀鏈接或建議。
uj5u.com熱心網友回復：
如果您將 contentEditable 移到段落標簽上，它將起作用。
document.querySelectorAll('tr:not(:first-child) td p').forEach((prg) => {
prg.setAttribute('contentEditable', true);
prg.addEventListener('keydown', () => {
console.log('test');
});
});<table>
<tr>
<td colspan='10'>First row</td>
</tr>
<tr>
<td data-property="phone">
<p data-property="phone" class="sub-cell">34567890</p>
<p data-property="phone" class="sub-cell">5511525298ss</p>
<p data-property="phone" class="sub-cell">5511525298</p>
</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/394449.html
標籤：javascript html 网络