Double-click the left and right arrows, fast switch picture scrolling, will choose the surrounding area of the text, feeling is not very good, today in the sharing of colleagues, talked about this problem, tried it, yes, solved the problem.
IE and chrome, add onselectstart= "return false" to the corresponding element. However, this does not work in Firefox, but Firefox can use CSS style to achieve this effect, that is, add-moz-user-select:none, it can be compatible with Ie,google,firefox, that is, the code looks like this:
The code is as follows: <div class= "Picbox" onselectstart= "return false;" style= "-moz-user-select:none;" > Screen Double-click the area of the selected text </div>So that the area of text can not be selected, it will not appear in the double click the left and right arrows to quickly toggle the picture scrolling will choose the surrounding area text
If you put
And
code is as follows: BodyAdd to body to prevent users from selecting the content on the page
CSS prevents you from double-clicking the page to select text
The-ms-user-select property is a new cascading style sheet (CSS) property that enables WEB developers and application developers to control where users choose text in their web pages or in Windows store applications that use JavaScript. This topic describes how to implement the-ms-user-select property on your own Web page. (Use the exact same method to implement the-ms-user-select property in a Windows store application that uses JavaScript.) It contains the following sections:
Note User-select property is not currently part of any World Wide Web Consortium (WWW) CSS specification. This property was originally proposed in the CSS3 user interface module, but the module has been replaced by a CSS3 basic user interface module that does not contain the User-select attribute. Other major browsers support this property version with their respective prefixes. There is a slight difference between these three implementations, so make sure to test your application in different browsers.
Brief introduction
The ability to select text on a Web page is important in many user scenarios. Please consider a typical news site. Most pages contain news articles, and they want to select the content of the article because they want to share it. However, the page may also contain menus, advertisements, and links to other parts of the site that users do not need or want to select. When you introduce support for the new-ms-user-select CSS properties in Internet Explorer 10, you can specify where to use the text selection feature, such as in the body of a news article, but not allowed in the menu.
Using-ms-user-select
The-ms-user-select property has four possible values:
Key word Description
element when the selection is initiated within the specified element, the text is selectable. However, the text selection is restricted within the bounds of the element.
None when you start the selection within the specified element, the text is not selectable. However, text selections that start outside of the specified element can still enter elements.
Text is selectable when you start a selection within a specified element. The text selection is not restricted to the bounds of the element, and can cross its bounds.
Auto This is the initial value. If an element contains editable text, such as an INPUT element or an element whose contenteditable is set to "true", the text is optional. Otherwise, select the value determined by the-ms-user-select property of the parent node.
Return to our news site scenario, for example, you can set-ms-user-select to "none" on the entire page, and then set-ms-user-select to "element" on the main article. To do so, only the article text is selectable. People who want to choose the content of a news article may not want to select the footer element for the article you just passed. Therefore, setting-ms-user-select to "element" makes it easy for these users to select the content of the article, but do not have to worry about whether the cursor placement is completely correct. This is especially important for users who navigate through the touch.
You can turn off text selection within any page element by setting-ms-user-select to none. The user will not be able to start the selection within the specified text block. However, if the user starts a text selection on another area of the page, you can continue to select within any area of the page, including areas where-ms-user-select is set to none.
Example implementation
The IE Test Drive has an instance demo of the-ms-user-select attribute being used. The demo shows an instance model of a blog post with several different text content areas: as a whole blog ("#blog"), composed of a blog post ("#blogPost") and a few comments (". Comment"). Each zone, in turn, consists of different types of text elements, including the input and textarea elements and the elements whose Contenteditable property is set to "true."
The pop-up menu on the left side of the page has several options for setting the-ms-user-select on the page element. Let's briefly explore the options listed in the pop-up menu in the demo.
Normal selection
This option indicates that-ms-user-select is not set on any element on the page. The user is free to select text in any selected element.
Turn off selections outside of editable content
This option sets the-ms-user-select of the blog (as a whole) to "none". This means that you cannot choose anything other than the text within the editable region, such as the name and comment fields.
Css
#blog {
-ms-user-select:none;
Turn off selection at any location
This option sets-ms-user-select to none for all elements, this time containing user input fields (input and TEXTAREA elements), and all other elements contenteditable set to True. This means that nothing can be selected, including the text in the editable region.
Css
#blog, #blog input, #blog textarea, #blog *[contenteditable=true] {
-ms-user-select:none;
}
Select blog post content only
This option sets the-ms-user-select to "element" for the element whose ID is "blogpost" and sets the blog as a whole, setting the-ms-user-select to "none". This means that only the blog post text can be selected.
Css
The code is as follows: #blogPost {Select Comments Only
This option sets the-ms-user-select to "element" for all elements whose class is "comment" and sets the blog as a whole, setting the-ms-user-select to "none". This means that only the comment text can be selected.
Css
The code is as follows:. Comment {.
Start a selection in a blog post or comment, but you can expand
This option sets the-ms-user-select to "text" for all elements whose ID is "blogpost" or its class is "comment", setting the-ms-user-select to "none" as a whole. This means that the text selection is only initiated in a blog post or comment, but the selection can be extended beyond any of these areas. However, text selection cannot be started outside of a blog post or comment.
Css
The code is as follows: #blogPost,. Comment {Support in other browsers
When writing this article, both Mozilla and WebKit support the User-select property version with their respective prefixes. However, there are some differences in its implementation.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
