Question

我有一个动态创建的表，它使用“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>";
}

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

Answer 1

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

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

contenteditable不在Microsoft Edge上工作

1 个答案: