Come prevenire o abilitare la selezione di testo nella pagina Web con CSS

La proprietà -ms-user-select è una nuova proprietà CSS (Cascading Style Sheets) che consente agli sviluppatori di app e Web di stabilire dove gli utenti possono selezionare il testo all'interno delle pagine Web o delle app di Windows Store scritte in JavaScript. Questo argomento spiega come implementare la proprietà -ms-user-select nella pagina Web. Puoi usare la stessa procedura anche per implementare la proprietà -ms-user-select in un'app di Windows Store scritta in JavaScript. Questo argomento include le sezioni seguenti:

Nota  La proprietà user-select non è attualmente inclusa in alcuna specifica CSS  del World Wide Web Consortium (W3C). In origine è stata proposta nel modulo User Interface for CSS3, ma questo modulo è stato sostituito in seguito dalla specifica CSS3 Basic User Interface Module, che non contiene la proprietà user-select. Altri browser di punta supportano versioni con prefisso proprio di questa proprietà. Esistono alcune differenze minime tra le tre implementazioni, quindi è importante testare l'applicazione nei vari browser.

Introduzione

Poter selezionare il testo nelle pagine Web può essere di fondamentale importanza in molti scenari utente. Consideriamo un sito di notizie standard. La maggior parte delle pagine include un articolo di cui gli utenti vogliono poter selezionare il contenuto per condividerlo. La pagina contiene probabilmente anche menu, annunci e link ad altre parti del sito che gli utenti non vogliono o devono selezionare. Grazie al supporto della nuova proprietà CSS -ms-user-select in Windows Internet Explorer 10, ora puoi specificare che la selezione del testo è ad esempio consentita nel corpo principale dell'articolo, ma non nei menu.

Uso di -ms-user-select

Per la proprietà -ms-user-select sono disponibili quattro possibili valori:

Parola chiaveDescrizione

element

Il testo è selezionabile quando si inizia la selezione nell'elemento specificato. Tuttavia, la selezione di testo è limitata ai limiti dell'elemento.

none

Il testo non è selezionabile quando si inizia la selezione nell'elemento specificato. Tuttavia, la selezione di testo iniziata all'esterno dell'elemento specificato può comunque accedere all'elemento.

text

Il testo è selezionabile quando si inizia la selezione nell'elemento specificato. La selezione di testo non è vincolata ai limiti dell'elemento e può essere estesa.

auto

Questo è il valore iniziale. Se l'elemento contiene testo modificabile, ad esempio un elemento input o un elemento in cui contenteditable è impostata su "true", il testo risulterà modificabile. In caso contrario, la selezione dipende dal valore della proprietà -ms-user-select del nodo padre.

 

Tornando al nostro scenario del sito di notizie, puoi ad esempio impostare -ms-user-select su "none" nell'intera pagina e quindi impostare -ms-user-select su "element" nell'articolo principale. In questo modo solo il testo dell'articolo risulterà selezionabile. È probabile che gli utenti che selezionano il contenuto di un articolo non vogliano includere anche gli elementi del piè di pagina. Impostando quindi -ms-user-select su "element" sarà più semplice selezionare il contenuto dell'articolo senza preoccuparsi dell'esatto posizionamento del cursore. Questa impostazione è particolarmente utile per gli utenti che navigano con il tocco.

Per disattivare la selezione di testo in qualsiasi elemento della pagina, basta impostare -ms-user-select su "none". In questo modo l'utente non potrà iniziare una selezione nel blocco di testo specificato. Se però l'utente ha iniziato a selezionare testo in un'area diversa della pagina, la selezione potrà continuare in qualsiasi area, incluse quelle in cui -ms-user-select è impostata su "none".

Esempio di implementazione

IE Test Drive include una dimostrazione pratica dell'uso della proprietà -ms-user-select. La dimostrazione illustra un modello di post di blog con diverse aree distinte di contenuto di testo, ovvero l'intero blog ("#blog"), costituito dal post ("#blogPost") e da diversi commenti (".comment"). Ogni area è a sua volta costituita da diversi tipi di elementi di testo, tra cui input e textarea ed elementi la cui proprietà contenteditable è impostata su "true".

Cattura di schermata della dimostrazione user-select su IE Test Drive

Il menu popup sul lato sinistro della pagina include diverse opzioni per impostare la proprietà -ms-user-select sugli elementi della pagina. Esaminiamo ora brevemente le opzioni del menu popup della demo.

Normal selection

Questa opzione indica che la proprietà -ms-user-select non è+ stata impostata su nessuno degli elementi della pagina. Gli utenti possono selezionare liberamente il testo in qualsiasi elemento.

Turn off selection except in editable content

Questa opzione consente di impostare la proprietà -ms-user-select su "none" per l'intero blog. Questo significa che non è possibile selezionare nessun elemento, ad eccezione del testo nelle aree modificabili, ad esempio i campi "Name" e "Comment".


#blog { 
  -ms-user-select:none;
} 

Turn off selection everywhere

Questa opzione consente di impostare -ms-user-select su "none" per tutti gli elementi, inclusi i campi di immissione utente (elementi input e textarea), e per qualsiasi altro elemento in cui contenteditable è impostata su true. Questo significa che non è possibile selezionare nessun elemento, incluso il testo nelle aree modificabili.


#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { 
  -ms-user-select:none;
}

Select blog post content only

Questa opzione consente di impostare -ms-user-select su "element" per gli elementi con ID "blogPost", impostando -ms-user-select su "none" per l'intero blog. Questo significa che è possibile selezionare solo il testo del post di blog.


#blogPost {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Select comments only

Questa opzione consente di impostare -ms-user-select su "element" per tutti gli elementi con classe "comment", impostando -ms-user-select su "none" per l'intero blog. Questo significa che è possibile selezionare solo il testo dei commenti.


.comment {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Selection starts in blog post or comments but can extend

Questa opzione consente di impostare -ms-user-select su "text" per tutti gli elementi con ID "blogPost" o classe "comment", impostando -ms-user-select su "none" per l'intero blog. Questo significa che la selezione di testo può iniziare solo all'interno del post di blog o dei commenti, ma che può estendersi all'esterno di queste aree. Non può invece iniziare all'esterno del post o dei commenti.


#blogPost, .comment { 
  -ms-user-select:text;
} 

#blog { 
  -ms-user-select:none;
}

Supporto in altri browser

Al momento della redazione di questo documento, in Mozilla e WebKit sono supportate apposite versioni della proprietà user-select. Le rispettive implementazioni presentano tuttavia numerose differenze. Per informazioni aggiornate, vedi i link seguenti:

Argomenti correlati

Dimostrazioni di IE Test Drive: User-Select
Esempi ed esercitazioni per Internet Explorer 10

 

 

Mostra:
© 2014 Microsoft