jquery - texto - contenteditable no funciona en IE 10

copy portapapeles javascript

Question

Estoy intentando crear una tabla editable del lado del cliente. Aquí está mi código. Funciona en Chrome, Firefox pero no en IE. ¿Hay algo más que ver con el script para 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>

Answer 1

Hay muchos elementos en IE, que no pueden tener el conjunto contenteditable directamente. Sin embargo, puede envolver toda la table en un div editable de contenido.

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

Esto hará que todas las celdas de la tabla sean editables . Aunque en algunos navegadores (FF) la vista será un poco desordenada debido a los controles de edición mostrados de la tabla.

Otra posibilidad es agregar, por ejemplo, un span o div editable de contenido a cada td .

Answer 2

IE no es una respuesta contenteditable dentro de la etiqueta td .

Puedes probar:

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