为什么我不能在 td >p 元素上添加“keydown”事件？

Question

I want to trigger some action when user press a key inside ap tag inside a td element, here is the HTML of a "td" on my table.

The problem is that when I add the keydown event to every paragraph element I don't see any response. Here is how I did it.

 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>

I had some other "keydown" events on the "td" elements but when I removed them it still not working.

When I use the "click" event instead "keydown" I obtain the response that I expect.

I read here https://www.w3schools.com/Jsref/event_onkeydown.asp that keydown event is supported in "p" and table elements.

I need to obtain the p in which the text editing is happening for update server info so add the event on the table cell is not working for me.

I really appreciate any help with this, links to read or suggestions.

Answer 1

If you shift the contentEditable onto the paragraph tags it will work.

 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>