2012-08-24 20 views
7
<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';"></div> 

Cuando hago clic en este cuadro, Firefox selecciona el texto. Si el div no está vacío, el texto no está seleccionado. ¿Porqué es eso?¿Por qué Firefox selecciona el texto cuando cambio innerHTML

Demo

+0

Realmente no sé por qué, pero se puede prevenir con css http://jsfiddle.net/ANKwQ/2/ –

+2

@peteris Esa es una buena solución, excepto que elimina por completo la funcionalidad de selección, que puede no ser deseada –

Respuesta

4

No sé cuál es la razón, pero no hay una solución simple. Ponga un &nbsp; en el div. Su código se vería así:

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';">&nbsp;</div> 

Demo

+0

WOP como un jefe! = P –

+0

@ShankarCabus WOP? –

+0

Sí, esto funciona. Todavía me pregunto por qué está pasando esto. Parece un comportamiento muy extraño de Firefox. – Tanatos

2

que podría ser el onclick. Usted puede tratar de tiempo de espera (exención de responsabilidad: Código de línea no se recomienda):

<div id="testDiv" style="float:left;width:100px;height:100px;border:1px solid black;" 
onclick="setTimeout(
    function() { 
    document.getElementById('testDiv').innerHTML = 'TEST'; 
    } 
,10)"></div> 

ACTUALIZACIÓN: Pero es no es el onclick - parece el clic se almacena en caché por Fx y todavía ejecutado después de que el tiempo de espera - Voy a dejar la responder a demostrar que no funcionó :)

DEMO

+0

El texto todavía se selecciona para mí. ¿Estás seguro de que lo arregla para ti? [Su demo] (http://jsfiddle.net/Ffubh/) –

1

es, posiblemente, a la manera de selección en el navegador manejo de obras. Si imagina cuando hace "clic" crea una selección contraída en esa ubicación (todas las selecciones tienen un punto de inicio y final) - esta selección contraída probablemente envuelve el inicio y el final de la div (desde una perspectiva DOM). A continuación, el código inyecta un contenido directamente dentro del div que empuja el punto final de la selección hasta después del nuevo texto ... cuando el navegador vuelve a dibujar, la selección de texto aparece mágicamente. Agregar el &nbsp; probablemente significa que FireFox tiene otro lugar para colocar la selección contraída para que no esté envolviendo el div.

Si alguna vez ha intentado crear su propio editor WYSIWYG basado en navegador, sabrá lo complicado que es codificar todo el proceso de selección.

Probablemente pueda solucionar el problema utilizando el método .blur(), o algunos de los métodos de selección actuales de FireFox ... aunque el método &nbsp; es elegante en su simplicidad.

error muy extraño para descubrir por cierto;)

Cuestiones relacionadas