2012-02-26 40 views
6

Por favor, echar un vistazo a este códigoborde azul extraño en Firefox

http://www.jsfiddle.net/tt13/5CxPr/21

En Firefox que muestra el borde azul extraña al seleccionar múltiples filas pulsando la tecla Ctrl pero en Chrome no lo hace .

enter image description here

Usando última versión de Firefox 10.0.2.

¿Este error está relacionado con el navegador?

+1

No es eso una característica? Firefox resalta los elementos seleccionados con un borde azul. – Alex

+0

Probablemente sea el bosquejo de tu visión, intenta eliminarlo. – adeneo

+0

@Alex Dunno. De todos modos, si esta es la característica, quiero deshabilitarla. La pregunta es, ¿cómo? –

Respuesta

9

Esto es debido al texto que está siendo seleccionada - el comportamiento del navegador nativo.

se puede observar el mismo problema en Chrome, así mediante el uso de la tecla SHIFT en lugar de CTRL.

Para superar esto, simplemente se puede borrar la selección justo después de usuario haga clic en la celda para seleccionar:

$(".subject").live('click',function(event) { 
    if(event.ctrlKey) { 
      $(this).toggleClass('selected'); 
    } else { 
      $(".subject").removeClass("selected"); 
      $(this).addClass("selected");   
    } 
    if (document.selection) 
     document.selection.empty(); 
    else if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
}); 

Updated fiddle.

8

Try propiedad CSS entorno -moz-user-select a la mesa para desactivar el comportamiento de la selección por defecto:

table { -moz-user-select: none; } 

MDN

+2

La consecuencia negativa de esto es que no permite seleccionar ningún texto de tabla. No solo elimina el borde al hacer clic en la celda de la tabla presionando Ctrl. –

+0

@MaratTanalin OOOPSS. Sí, eres cierto. ¿Cuál es tu solución? –

+0

@ trl13 solución es borrar la selección, no evitarlo - ver mi respuesta. –

3

Esto funciona para la versión actual de Firefox 20.0.1 si está preparado para agregar un elemento extra dentro de su celda para permitir que el texto aún pueda seleccionarse.

td { -moz-user-select: -moz-none } 
td * { -moz-user-select: text } 

http://jsfiddle.net/nukj7/

+0

¿Cómo lidiar con varias filas? Tengo una tabla con varias filas. Con su solución, solo puedo seleccionar una td en una fila. ¿Puede proporcionar una solución? Gracias de antemano – webprogrammer

Cuestiones relacionadas