移动端添加可编辑表格行时触发数字键盘的实现求助

你遇到的问题根源是同时给<td>加了contenteditable属性，又在里面嵌套了<input type="number">，导致两个可输入区域冲突。下面是具体的解决办法：

修改思路 #

去掉<td>的contenteditable属性，直接用<input>作为单元格的内容，这样既保证只有一个输入区域，又能让移动端触发数字键盘。同时调整样式让input铺满单元格，视觉上和原可编辑td一致。

修改后的代码 #

$(function() { // Create New Row 
  $('#add_member').click(function() { 
    if ($('tr[data-id=""]').length > 0) { 
      $('tr[data-id=""]').find('[name="name"]').focus(); 
      return false; 
    } 

    var tr = $('<tr>');
    $('input[name="id"]').val('');
    tr.addClass('py-1 px-2'); 
    tr.attr('data-id', ''); 
    // 移除td的contenteditable，用input填充，添加inputmode增强兼容性
    tr.append('<td><input type="number" inputmode="numeric" name="round" style="width:100%; height:80px; border:none; outline:none; background:transparent;"></td>');
    $('#form-tbl').append(tr); 
 
    // 聚焦到input上，而不是td
    tr.find('[name="round"]').focus(); 
  });
});

关键说明 #

• 移除<td>的contenteditable，避免和内部input冲突。
• type="number"确保移动端弹出数字键盘，额外添加inputmode="numeric"可以兼容更多设备（比如部分安卓设备对type="number"的处理有差异）。
• 给input设置width:100%; border:none; outline:none; background:transparent，让它看起来和原可编辑td一样，没有额外边框和背景。
• 调整focus目标为input，确保点击添加行后直接聚焦到输入框。

内容的提问来源于stack exchange，提问作者DHQ DoITC JAIPUR