contenteditable不在Microsoft Edge上工作

Question

I've got a dynamically created table, that utilizes "contenteditable".

Recently, I've had a user try to use the webpage via Microsoft Edge and none of the fields work. I then tried it on my computer as well, and had the same issue.

I use Google Chrome to develop and that works perfectly fine, and on the documentation it says that Edge is supported.

Here is the code that generates my tables rows:

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

Is this some kind of incompatibility? What can I do to resolve this issue?

Answer 1

In order to avoid that kind of problems and maximize compatibility, it's better to use contentEditable only on a restricted number of tags like divs, if you use it in other elements like td then you might find problems like this one.

So the solution would be to include a div in each of those cells and make those divs the contentEditable elements