contenteditable 无法在 Microsoft Edge 上运行答案

【问题标题】：contenteditable not working on Microsoft Edgecontenteditable 无法在 Microsoft Edge 上运行
【发布时间】：2016-09-07 18:41:27
【问题描述】：

我有一个动态创建的表，它利用“contenteditable”。

最近，我有一个用户尝试通过 Microsoft Edge 使用该网页，但这些字段都不起作用。然后我也在我的电脑上试了一下，也遇到了同样的问题。

我使用 Google Chrome 进行开发，效果非常好，并且在文档上说支持 Edge。

这是生成我的表格行的代码：

while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
    echo "<tr>";
        echo "<td style='width:10%;overflow:auto;border-left:1px solid #ddd;'>
            <div style='cursor:pointer' name='del' class='fa fa-times-circle fa-lg button2' aria-hidden='true'>
                <div style='display:none'>
                    ".$row['uniqueID']."
                </div>
            </div>
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='Readable:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Readable']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='Type:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Type']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='Category:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Category']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='Status:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Status']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='ShelfID:".$row['uniqueID']."' contenteditable='true'>
            ".$row['ShelfID']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='LocationID:".$row['uniqueID']."' contenteditable='true'>
            ".$row['LocationID']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='Height:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Height']."
        </td>";
        echo "<td style='width:10%;overflow:auto;' id='ListingStatus:".$row['uniqueID']."' contenteditable='true'>
            ".$row['ListingStatus']."
        </td>";
        echo "<td style='width:10%;overflow:auto;border-right:1px solid #ddd;' id='Sales:".$row['uniqueID']."' contenteditable='true'>
            ".$row['Sales']."
        </td>";
    echo "</tr>";
}

这是某种不兼容吗？我该怎么做才能解决这个问题？

【问题讨论】：

标签： php html contenteditable

【解决方案1】：

为了避免此类问题并最大限度地提高兼容性，最好仅在 div 等有限数量的标签上使用 contentEditable，如果您在 td 等其他元素中使用它，那么您可能会发现类似这样的问题。

因此解决方案是在每个单元格中包含一个 div，并使这些 div 成为 contentEditable 元素

【讨论】：

有推荐标签列表吗？除了div 还有什么？内联的东西，比如span?
您可以查找例如 CKEditor 中使用的列表。我知道默认情况下它们不允许内联元素，但您可以调整该设置以启用它（如果某些浏览器 barfs 则由您决定）
看起来这是适合我的解决方案。我必须在我的 saveEdit 函数中将 var value = document.getElementById("row"+task_id+"_cell"+cell).innerHTML; 更改为 var value = document.getElementById("row"+task_id+"_cell"+cell).firstChild.innerHTML;，确保传递 div 的父 TD 单元格的 id。