focus contenteditable compatible

suncubus · #1 (**permalink**) 24/01/2012, 07:43

Código HTML:

Ver originalarticle{
        height:130px;
        overflow:hidden;
        transition:height 2s;
        -webkit-transition:height 2s;
        -ms-transition:height 2s;
        -op-transition:height 2s;
        -moz-transition:height 2s;
    }
article:focus{
        height:280px;
        outline:none;
}
 
<article contenteditable="true">
                                <h3 contenteditable="false">titulo</h3>
                                <img src="img/quien.gif" width="800" height="100" contenteditable="false"/>
                                <p contenteditable="false">un texto cualquiera</p>
 
                            </article>

En chrome me funciona estupendamente.
En Firefox y ie, el contenido de la p y la imagen siguen siendo editables, los puedo borrar, mover...
Alguién sabe como corregir esto? como puedo hacer para que no se pueda modificar nada y me haga el focus?

emprear · #2 (**permalink**) 24/01/2012, 13:04

Esta no es una solución tan solo una aproximación

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
article{
        height:130px;
        overflow:hidden;
        transition:height 2s;
        -webkit-transition:height 2s;
        -ms-transition:height 2s;
        -op-transition:height 2s;
        -moz-transition:height 2s;
    }
 
article:focus{
        height:280px;
        outline:none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function desactivar(){
document.getElementById('xxx').contentEditable= false;
}
function activar(){
document.getElementById('xxx').contentEditable= true;
}
//]]>
</script>
</head>
<body>
<article id="xxx" contenteditable="true">
<h3>titulo</h3>
<img src="correcto01.png" width="800" height="100" alt="" onmouseover="desactivar();" onmouseout="activar()"/>
<p onclick="desactivar();" onmouseout="activar()">un texto cualquiera</p>
</article>
</body>
</html>

Fijate que el h3 sigue siendo editable porque no contiene los eventos de javascript.
Por lo visto lo del conteneditable lo pusiste para que el article recibiera el focus, pero si no vas a editar nada, quizás sea más práctico usa la pseudoclase :hover.

El efecto lo veo individualmente, pero habría que analizar el conjunto de la aplicación
Saludos

suncubus · #3 (**permalink**) 25/01/2012, 01:21

Gracias por responder,

no he utilizado el hover, ya que se va a usar también en tablets y en móviles.

He estado haciendo pruebas con el código que me pasas, pero sigo sin solucionar el problema, firefox e ie los elementos siguen siendo editables.

La solución que he tomado es javascript, a través de funciones le cambio el tamaño.

un saludo