contenteditable 在 IE 10 中不起作用答案

【问题标题】：contenteditable not working in IE 10contenteditable 在 IE 10 中不起作用
【发布时间】：2013-08-22 13:34:12
【问题描述】：

我正在尝试创建客户端可编辑表。这是我的代码。它适用于 Chrome、Firefox 但不适用于 IE。 IE脚本还有什么关系吗？

<script type="text/javascript"       src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

$("td").click(function(){
if($(this).attr("contentEditable") == true){
    $(this).attr("contentEditable","false");
} else {
    $(this).attr("contentEditable","true");
}
})
});
</script>

<p> 
<table id='transitTable' border="1" cellspacing="2" cellpadding="2" class='display'    width="400">
<tr id='1'>
<td >H1</td>
<td >H2</td>
<td >H3</td>
<td >H4</td></tr>
<tr id='2'>
<td >R1</td>
<td >R1</td>
<td >R1</td>
<td >R1</td></tr>
<tr id='3'>
<td >R2</td>
<td >R2</td>
<td >R2</td>
<td>R2</td></tr></table></p>

【问题讨论】：

标签： jquery internet-explorer html-table internet-explorer-10 contenteditable

【解决方案1】：

IE中有很多元素，不能直接设置contenteditable。但是，您可以将整个 table 包装成可编辑的内容 div。

<div contenteditable="true">
    <table>
       ...
    </table>
</div>

这将是make all the cells in the table editable。尽管在某些浏览器 (FF) 中，由于显示了表格的编辑句柄，视图会有些混乱。

另一种可能性是向每个td 添加例如可编辑的span 或div 内容。

【讨论】：

@Teemu：嗨。如果我想让输入框不可编辑怎么办？ contenteditable="false" 在 IE9 中不起作用。适用于 chrome。

【解决方案2】：

IE 在td 标签内没有响应contenteditable。

你可以试试：

<td id="my-content" class="editable">
    <div contentEditable="true" style="width: 100%; height: 100%;">
        ...
    </div>
</td>

【讨论】：

【解决方案3】：

下面的代码可以在 IE 和 chrome 中运行，而无需对 GUI 进行网格化。

   <td contentEditable="true">
    <div contentEditable="true">
        ...
    </div>
   </td>

【讨论】：