亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        利用CSS實現(xiàn)禁止雙擊選擇頁面內(nèi)容的實例展示

        字號:


            在雙擊左右箭頭,快速切換圖片滾動時,會選擇附近區(qū)域的文字,感覺不是很好,今天在同事在分享時,講到了這個問題, 試了一下,不錯,解決了問題。
            IE及Chrome下的方法一樣,對相應(yīng)的元素添加onselectstart=”return false;”但是,這個在火狐下不起作用,但是火狐下可以用css樣式來達到這個效果,即添加-moz-user-select:none;就可以兼容ie,google,firefox了,即代碼如下所示:
            代碼如下:
            <div onselectstart="return false;">屏蔽雙擊選中文字的區(qū)域</div>
            這樣這個區(qū)域的文字都不能選中了,就也不會出現(xiàn)在雙擊左右箭頭快速切換圖片滾動時會選擇附近區(qū)域文字的情況了
            如果把
            代碼如下:
            <body onselectstart="return false">
            和
            代碼如下:
            body
            {
            -moz-user-select: none;
            }
            添加到body中,就實現(xiàn)了禁止用戶選中頁面上內(nèi)容的效果
            css禁止雙擊頁面選中文本
            -ms-user-select 屬性是一個新的級聯(lián)樣式表 (CSS) 屬性,它使 Web 開發(fā)人員和應(yīng)用開發(fā)人員能夠控制用戶在其網(wǎng)頁或使用 JavaScript 的 Windows 應(yīng)用商店應(yīng)用中選擇文本的位置。 本主題介紹如何在你自己的網(wǎng)頁上實施 -ms-user-select 屬性。(采用完全相同的方法在使用 JavaScript 的 Windows 應(yīng)用商店應(yīng)用中實施 -ms-user-select 屬性。)它包含以下幾部分:
            Note user-select 屬性當(dāng)前不是任何萬維網(wǎng)聯(lián)合會 (W3C) CSS 規(guī)范的一部分。該屬性最初是在 CSS3 的用戶界面模塊中提出的,但是該模塊已被不包含 user-select 屬性的 CSS3 基本用戶界面模塊所取代。其他主要的瀏覽器支持帶有其各自前綴的此屬性版本。這三個實現(xiàn)之間存在細(xì)微區(qū)別,因此請確保在不同的瀏覽器中測試你的應(yīng)用程序。
            簡介
            在網(wǎng)頁上選擇文本的功能在許多用戶方案中非常重要。請考慮一個典型的新聞?wù)军c。大多數(shù)頁面包含新聞文章,由于用戶希望共享內(nèi)容而想要選擇文章的內(nèi)容。但是,頁面還可能包含用戶不需要或不希望選擇的菜單、廣告和指向站點其他部分的鏈接。Internet Explorer 10 中引入對新 -ms-user-select CSS 屬性的支持以后,你可以指定允許在何處使用文本選擇功能,例如在新聞文章的正文中允許使用,但在菜單中不允許使用。
            使用 -ms-user-select
            -ms-user-select 屬性具有四個可能值:
            關(guān)鍵字 Description
            element 在指定的元素內(nèi)啟動選擇時,文本是可選擇的。但是,文本選擇限制在該元素的邊界內(nèi)。
            none 在指定的元素內(nèi)啟動選擇時,文本不可選擇。但是,在指定的元素之外啟動的文本選擇仍可輸入元素。
            text 在指定的元素內(nèi)啟動選擇時,文本是可選擇的。文本選擇未限制在元素的邊界內(nèi),并且可以越過其邊界。
            auto 這是初始值。如果元素包含可編輯文本,例如 input 元素或其 contenteditable 設(shè)置為 "true" 的元素,則該文本是可選擇的。否則,選擇由父節(jié)點的 -ms-user-select 屬性的值確定。
            返回到我們的新聞?wù)军c方案,例如,你可以在整個頁面上將 -ms-user-select 設(shè)置為 "none",然后在主文章上將 -ms-user-select 設(shè)置為 "element"。這樣做,則只有文章文本是可選擇的。希望選擇新聞文章的內(nèi)容的人們可能不希望選擇剛剛過去的文章的頁腳元素。因此,將 -ms-user-select 設(shè)置為 "element",這樣使得這些用戶可以只輕松選擇文章的內(nèi)容,但不必?fù)?dān)心光標(biāo)放置位置是否完全正確。對于通過觸摸導(dǎo)航的用戶,這一點尤其重要。
            你可以通過將 -ms-user-select 設(shè)置為 "none",在任何頁面元素內(nèi)關(guān)閉文本選擇。用戶將無法在指定的文本塊內(nèi)啟動選擇。但是,如果用戶在頁面的其他區(qū)域上啟動文本選擇,則可以在頁面的任何區(qū)域內(nèi)繼續(xù)選擇,其中包括將 -ms-user-select 設(shè)置為 "none" 的區(qū)域。
            示例實施
            IE Test Drive 具有正在使用的 -ms-user-select 屬性的實例演示。該演示展示了一個博客帖子的實例模型,其中具有幾個不同的文本內(nèi)容區(qū)域:作為整體的博客 ("#blog"),由博客帖子 ("#blogPost") 和幾條評論 (".comment") 組成。每個區(qū)域依次由不同類型的文本元素組成,其中包括 input 和 textarea 元素以及其 contenteditable 屬性設(shè)置為 "true" 的元素。
            名單
            利用CSS實現(xiàn)禁止雙擊選擇頁面內(nèi)容的實例展示 三聯(lián)
            頁面左側(cè)的彈出菜單具有幾個選項,這些選項用于設(shè)置頁面元素上的 -ms-user-select。讓我們簡要地瀏覽一下演示內(nèi)彈出菜單中列出的選項。
            正常選擇
            此選項指示未在頁面上的任何元素上設(shè)置 -ms-user-select。用戶可自由選擇任意所選元素中的文本。
            關(guān)閉除可編輯內(nèi)容外的選擇
            此選項將博客(作為整體)的 -ms-user-select 設(shè)置為 "none"。這意味著,不可選擇除了可編輯區(qū)域內(nèi)的文本之外的任何內(nèi)容,例如“名稱”和“評論”字段。
            CSS
            #blog {
            -ms-user-select:none;
            }在任何位置關(guān)閉選擇
            此選項針對所有元素將 -ms-user-select 設(shè)置為 "none",這次將包含用戶輸入字段(input 和 textarea 元素),以及contenteditable 設(shè)置為 true 的其他所有元素。這意味著,不可選擇任何內(nèi)容,包括可編輯區(qū)域中的文本。
            CSS
            #blog, #blog input, #blog textarea, #blog *[contenteditable=true] {
            -ms-user-select:none;
            }
            僅選擇博客帖子內(nèi)容
            此選項針對其 ID 為 "blogPost" 的元素,將 -ms-user-select 設(shè)置為 "element",同時將博客作為整體,將 -ms-user-select 設(shè)置為 "none"。 這意味著,只能選擇博客帖子文本。
            CSS
            代碼如下:
            #blogPost {
            -ms-user-select:element;
            }
            blog {
            -ms-user-select:none;
            }
            僅選擇評論
            此選項針對其類為 "comment" 的所有元素,將 -ms-user-select 設(shè)置為 "element",同時將博客作為整體,將 -ms-user-select 設(shè)置為 "none"。 這意味著,只能選擇評論文本。
            CSS
            代碼如下:
            .comment {
            -ms-user-select:element;
            }
            #blog {
            -ms-user-select:none;
            }
            .
            在博客帖子或評論中啟動選擇,但可以擴展
            此選項針對其 ID 為 "blogPost" 或其類為 "comment" 的所有元素,將 -ms-user-select 設(shè)置為 "text",同時將博客作為整體,將 -ms-user-select 設(shè)置為 "none"。這意味著,僅在博客帖子或評論中啟動文本選擇,但選擇可擴展到任意這些區(qū)域之外。但是,文本選擇無法在博客帖子或評論之外啟動。
            CSS
            代碼如下:
            #blogPost, .comment {
            -ms-user-select:text;
            }
            #blog {
            -ms-user-select:none;
            }
            其他瀏覽器中的支持
            編寫本文時,Mozilla 和 WebKit 均支持帶有其各自前綴的 user-select 屬性版本。但是,在其實施中存在某些不同之處。