Tengo una tabla, y estoy permitiendo a los usuarios para seleccionar múltiples filas. Todo esto es manejado usando jQuery eventos y un poco de CSS para indicar visualmente la fila es «seleccionado». Cuando el usuario presiona shift, es posible seleccionar varias filas. A veces esta causa de texto para ser destacado. ¿Hay alguna manera de evitar esto?

InformationsquelleAutor mikeycgto | 2009-08-23

7 Comentarios

  1. 72

    Hay una propiedad CSS3 para que.

    #yourTable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    • Lástima que Internet Explorer no le importa. Probado en 6-8.
    • Después de googlear encontrará un duplicado donde esto ya está resuelto: stackoverflow.com/questions/826782/…
    • Validation (CSS 3.0): "moz-none" is not a valid value for the "-moz-user-select" property. Y de hecho, esto no funciona para Firefox hasta que he cambiado moz-none a none.
  2. 32

    Si quieres tener el control cuando los usuarios pueden seleccionar o no las partes de su sitio, usted puede utilizar este poco plugin de jQuery.

    jQuery.fn.extend({ 
            disableSelection : function() { 
                    return this.each(function() { 
                            this.onselectstart = function() { return false; }; 
                            this.unselectable = "on"; 
                            jQuery(this).css('user-select', 'none'); 
                            jQuery(this).css('-o-user-select', 'none'); 
                            jQuery(this).css('-moz-user-select', 'none'); 
                            jQuery(this).css('-khtml-user-select', 'none'); 
                            jQuery(this).css('-webkit-user-select', 'none'); 
                    }); 
            } 
    }); 

    y usarla como:

    //disable selection on #theDiv object
    $('#theDiv').disableSelection(); 

    De lo contrario, usted puede utilizar estos atributos css dentro de su archivo css:

    #theDiv
     {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
  3. 13

    Sólo una nota en la respuesta de Cleiton anteriormente en el ejemplo de código parece estar bien, pero para ser un buen ciudadano en el jQuery mundo, usted debe devolver el objeto jQuery en el final de la función, de modo que es encadenable – una simple adición de la línea de revisiones de seguridad:

    jQuery.fn.extend({
        disableSelection : function() {
                this.each(function() {
                        this.onselectstart = function() { return false; };
                        this.unselectable = "on";
                        jQuery(this).css('-moz-user-select', 'none');
                });
                return this;
        }
    });

    Saludos, espero que esto sea útil.

    • Él hace esto con la «devolución.each(function() {…»
  4. 3

    Yo simplemente quite la selección que se hace con la tecla mayús. Esto podría mostrar un poco de parpadeo aunque

    if (event.shiftKey) {
        window.getSelection().removeAllRanges()
    }
  5. 1

    Puedes probar con focus() función en el texto seleccionado – la selección desaparece.

    $('#someEl').focus();
  6. 1

    Si usted tiene Jquery UI en sus páginas, sólo tiene que utilizar

        $("element-selector").disableSelection();
    • Este es indocumentados, pero debería funcionar si usted tiene jQuery UI core
    • lo bueno de esta solución es que también es aplicable a IE y replicar la funcionalidad de las soluciones ya se ha mencionado si se mira el código.
    • Tenga en cuenta que disableSelection() está en desuso en la interfaz de usuario jQuery 1.9
  7. 0
    ::-moz-selection { /* Code for Firefox */  
        color: black;  
        background: none;
    }
    
    ::selection {  
        color: black;  
        background: none;  
    }  

    de http://www.w3schools.com/cssref/sel_selection.asp

    en realidad a partir de la prueba de la sección, después de cambiar los valores.

    aviso a pesar de que el cursor está siendo ‘yo’ en forma de…

    • Nota: La ::la selección del pseudo-elemento fue redactado por los Selectores de CSS Nivel 3, pero removidos antes de que el carácter de Recomendación. Así que, por el momento, la ::la selección del pseudo-elemento que no está en ninguna especificación. (Sin embargo, se puede volver a agregar a futuro CSS pliego de condiciones).

Dejar respuesta

Please enter your comment!
Please enter your name here