contenteditable 不适用于 Microsoft Edge

Question

我有一个动态创建的 table，它利用 "contenteditable"。

最近，我有一位用户尝试通过 Microsoft Edge 使用该网页，并且 none 的字段有效。然后我也在我的电脑上试了一下，也遇到了同样的问题。

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

这是生成我的 table 行的代码：

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

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

Answer 1

为了避免这类问题并最大限度地提高兼容性，最好只在有限数量的标签上使用 contentEditable，例如 divs，如果您在其他元素（例如 td）中使用它，您可能会发现像这样的问题。

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

contenteditable 不适用于 Microsoft Edge

contenteditable not working on Microsoft Edge

html

php

contenteditable