您現在的位置是:電腦技術吧?>? 基礎知識 ??>??如何關閉網頁雙擊放大,禁止頁面雙擊放大??>??正文詳情

如何關閉網頁雙擊放大,禁止頁面雙擊放大

宮采蓮2019-11-15 08:00:57 人圍觀
簡介雙擊放大該如何取消當您雙擊左右箭頭在圖片和滾動之間快速切換時,您將在附近區域選擇文本。我覺得不太好。今天,當我的同事們分享的時候,他們討論了這個問題并嘗試了。很好

在雙擊左右箭頭,快速切換圖片滾動時,會選擇附近區域的文字,感覺不是很好,今天在同事在分享時,講到了這個問題, 試了一下,不錯,解決了問題。

IE及Chrome下的方法一樣,對相應的元素添加onselectstart=return false;但是,這個在火狐下不起作用,但是火狐下可以用css樣式來達到這個效果,即添加-moz-user-select:none;就可以兼容ie,google,firefox了,即代碼如下所示:代碼如下:div class=picBox onselectstart=return false; style=-moz-user-select:none;屏蔽雙擊選中文字的區域/div這樣這個區域的文字都不能選中了,就也不會出現在雙擊左右箭頭快速切換圖片滾動時會選擇附近區域文字的情況了如果把代碼如下:body onselectstart=return false和代碼如下:body{-moz-user-select: none;}添加到body中,就實現了禁止用戶選中頁面上內容的效果css禁止雙擊頁面選中文本-ms-user-select 屬性是一個新的級聯樣式表 (CSS) 屬性,它使 Web 開發人員和應用開發人員能夠控制用戶在其網頁或使用 JavaScript 的 Windows 應用商店應用中選擇文本的位置。

本主題介紹如何在你自己的網頁上實施 -ms-user-select 屬性。

(采用完全相同的方法在使用 JavaScript 的 Windows 應用商店應用中實施 -ms-user-select 屬性。

)它包含以下幾部分:Note user-select 屬性當前不是任何萬維網聯合會 (W3C) CSS 規范的一部分。

該屬性最初是在 CSS3 的用戶界面模塊中提出的,但是該模塊已被不包含 user-select 屬性的 CSS3 基本用戶界面模塊所取代。

其他主要的瀏覽器支持帶有其各自前綴的此屬性版本。

這三個實現之間存在細微區別,因此請確保在不同的瀏覽器中測試你的應用程序。

簡介在網頁上選擇文本的功能在許多用戶方案中非常重要。

請考慮一個典型的新聞站點。

大多數頁面包含新聞文章,由于用戶希望共享內容而想要選擇文章的內容。

但是,頁面還可能包含用戶不需要或不希望選擇的菜單、廣告和指向站點其他部分的鏈接。

Internet Explorer 10 中引入對新 -ms-user-select CSS 屬性的支持以后,你可以指定允許在何處使用文本選擇功能,例如在新聞文章的正文中允許使用,但在菜單中不允許使用。

使用 -ms-user-select-ms-user-select 屬性具有四個可能值:關鍵字 Description element 在指定的元素內啟動選擇時,文本是可選擇的。

但是,文本選擇限制在該元素的邊界內。

none 在指定的元素內啟動選擇時,文本不可選擇。

但是,在指定的元素之外啟動的文本選擇仍可輸入元素。

text 在指定的元素內啟動選擇時,文本是可選擇的。

文本選擇未限制在元素的邊界內,并且可以越過其邊界。

auto 這是初始值。

如果元素包含可編輯文本,例如 input 元素或其 contenteditable 設置為 true 的元素,則該文本是可選擇的。

否則,選擇由父節點的 -ms-user-select 屬性的值確定。

返回到我們的新聞站點方案,例如,你可以在整個頁面上將 -ms-user-select 設置為 none,然后在主文章上將 -ms-user-select 設置為 element。

這樣做,則只有文章文本是可選擇的。

希望選擇新聞文章的內容的人們可能不希望選擇剛剛過去的文章的頁腳元素。

因此,將 -ms-user-select 設置為 element,這樣使得這些用戶可以只輕松選擇文章的內容,但不必擔心光標放置位置是否完全正確。

對于通過觸摸導航的用戶,這一點尤其重要。

你可以通過將 -ms-user-select 設置為 none,在任何頁面元素內關閉文本選擇。

用戶將無法在指定的文本塊內啟動選擇。

但是,如果用戶在頁面的其他區域上啟動文本選擇,則可以在頁面的任何區域內繼續選擇,其中包括將 -ms-user-select 設置為 none 的區域。

示例實施IE Test Drive 具有正在使用的 -ms-user-select 屬性的實例演示。

該演示展示了一個博客帖子的實例模型,其中具有幾個不同的文本內容區域:作為整體的博客 (#blog),由博客帖子 (#blogPost) 和幾條評論 (.comment) 組成。

每個區域依次由不同類型的文本元素組成,其中包括 input 和 textarea 元素以及其 contenteditable 屬性設置為 true 的元素。

頁面左側的彈出菜單具有幾個選項,這些選項用于設置頁面元素上的 -ms-user-select。

讓我們簡要地瀏覽一下演示內彈出菜單中列出的選項。

正常選擇此選項指示未在頁面上的任何元素上設置 -ms-user-select。

用戶可自由選擇任意所選元素中的文本。

關閉除可編輯內容外的選擇此選項將博客(作為整體)的 -ms-user-select 設置為 none。

這意味著,不可選擇除了可編輯區域內的文本之外的任何內容,例如名稱和評論字段。

CSS#blog { -ms-user-select:none;}在任何位置關閉選擇此選項針對所有元素將 -ms-user-select 設置為 none,這次將包含用戶輸入字段(input 和 textarea 元素),以及contenteditable 設置為 true 的其他所有元素。

這意味著,不可選擇任何內容,包括可編輯區域中的文本。

CSS#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { -ms-user-select:none;}僅選擇博客帖子內容此選項針對其 ID 為 blogPost 的元素,將 -ms-user-select 設置為 element,同時將博客作為整體,將 -ms-user-select 設置為 none。

這意味著,只能選擇博客帖子文本。

CSS代碼如下:#blogPost {-ms-user-select:element;} blog { -ms-user-select:none;}僅選擇評論此選項針對其類為 comment 的所有元素,將 -ms-user-select 設置為 element,同時將博客作為整體,將 -ms-user-select 設置為 none。

這意味著,只能選擇評論文本。

CSS代碼如下:.comment {-ms-user-select:element;} #blog { -ms-user-select:none;}.在博客帖子或評論中啟動選擇,但可以擴展此選項針對其 ID 為 blogPost 或其類為 comment 的所有元素,將 -ms-user-select 設置為 text,同時將博客作為整體,將 -ms-user-select 設置為 none。

這意味著,僅在博客帖子或評論中啟動文本選擇,但選擇可擴展到任意這些區域之外。

但是,文本選擇無法在博客帖子或評論之外啟動。

CSS代碼如下:#blogPost, .comment { -ms-user-select:text;} #blog { -ms-user-select:none;}其他瀏覽器中的支持編寫本文時,Mozilla 和 WebKit 均支持帶有其各自前綴的 user-select 屬性版本。

但是,在其實施中存在某些不同之處。

版權聲明:本文由 宮采蓮 整理編輯。

原標題:雙擊手機主頁面會放大,手機網頁雙擊不放大

轉載注明出處:http://www.dn9ww09s.icu/basics/12435.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 微軟XP,微軟XP激活

    微軟XP,微軟XP激活 相關圖片微軟原版xp安裝系統據國外媒體報道,微軟高級副總裁比爾·維赫特(bill veghte)在本周寫給用戶的信中表示,微軟承諾將Windows XP的支持服務延長至2014年,比之前的怎樣在微軟官網上找到...

  • 矢量風格,矢量風

    矢量風格,矢量風 相關圖片經典英倫風格矢量素材元旦、圣誕節就要到了,這個小技巧可以幫你在節日頁面制作Png圖:(右擊-選擇另存為下載保存)步驟:1。打開煙火,在需要添加冰雪覆蓋效果的對象上畫一個矩...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載下載Windows XP Professional with service pack 3(x86)-CD(簡體中文)XP免費升級win10...

  • 立體水晶怎么折,折水晶

    立體水晶怎么折,折水晶 相關圖片折紙水晶討論:http://www.missyuan.com/viewthread.php?tid=402076立體水晶畫...

  • xp最新,ghost xp sp3是什么

    xp最新,ghost xp sp3是什么 相關圖片xpsp3系統原版4月23日,微軟推出了簡體中文的XP SP3。我相信每個人都應該下載它。最新的補丁總是需要打印,但這個補丁不是一般的。這是一個更大的補丁!好花需要綠葉相配。沒有xp...

  • qt安裝教程及配置,plsql安裝教程及配置

    qt安裝教程及配置,plsql安裝教程及配置 相關圖片tomcat9的安裝與配置Cobbler是一種快速網絡安裝的Linux服務,經過調整還可以支持windows的網絡安裝。這個工具是用Python開發的,它小巧輕便(只有15K行Pythotomcat的安裝與配置...

  • 三星死機怎么強制重啟,三星死機怎么強制關機

    三星死機怎么強制重啟,三星死機怎么強制關機 相關圖片三星c7死機了如何重啟在使用計算機的過程中,我們經常會遇到崩潰的情況,而崩潰伴隨著計算機操作系統的出現,從windows圖形操作系統開始,就出現了這樣的情況,為什么我們不能一...

  • xp系統還原怎么,xp的系統還原在哪

    xp系統還原怎么,xp的系統還原在哪 相關圖片xp系統怎么一鍵還原修復XP系統可以在高級選項菜單中實現,這一部分將為您討論。現在,您可以使用系統還原和恢復功能來修復XP,而不是高級選項菜單功能。有關詳細信息,請參閱下...

  • 代碼生成工具,代碼文檔生成工具

    代碼生成工具,代碼文檔生成工具 相關圖片生成代碼今天的資源是完全免費的webapps,可以為模板、漸變甚至瀏覽器屬性的前綴生成CSS3代碼。如果您是一個前端開發人員,這些資源可以幫助您節省大量時間,并為以后的java圖形界...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載一。讓其他人登錄到您的計算機。2。Win XP區域網絡定位。三。加速撥號上網。四。提高網絡鄰居共享的速度。5個。安裝NetBEUI通信協議。一。XP網絡鄰居允許XP免費升級win10...

熱評文章

  • z390裝win7完美解決方案,九代cpu裝win7完美解決方案

    z390裝win7完美解決方案,九代cpu裝win7完美解決方案 相關圖片XP系統我不知道有多少朋友想整合MCE。讓我和你分享我的整合經驗。為了方便大家得到所需,這里有一些總結內容和相關下載。我將在后面填寫具體的分析和想法,在集成之前必須理解...

  • 瀏覽器頁面無法顯示網頁,網頁不能打開

    瀏覽器頁面無法顯示網頁,網頁不能打開 相關圖片瀏覽網頁IE無法瀏覽Internet的常見原因和解決方案:首先,網絡設置問題經常出現在需要手動指定IP、網關、DNS服務器的網絡模式,以及使用代理服務器訪問Intern網頁打不開...

  • 雨后的蝴蝶,雨后蝴蝶在地上飛不起來

    雨后的蝴蝶,雨后蝴蝶在地上飛不起來 相關圖片寫雨后蝴蝶經過努力重飛上天遠景越來越近了。我相信你一定會驚嘆于它的自然景觀壁紙。現在讓我們做一個遠景風格的景觀。把它放在桌面上肯定是個錯誤。大雨過后,綠葉上散落著...

  • 微軟,微軟收

    微軟,微軟收 相關圖片微軟客服最后,是時候下載xp sp3了。我相信你會在第一時間下載它,并盡快感受XP SP3。之前的測試已經表明SP3非常好,這比Vista SP1的性能要好得多!4月2微軟電話激活步驟...

  • Linux自定義命令,linux如何自定義命令

    Linux自定義命令,linux如何自定義命令 相關圖片linux創建命令如果網站圖片尺寸過大,會增加服務器的負擔,影響瀏覽速度。我們拍攝或獲取的圖片的大小和容量通常很大,因此我們需要調整圖片的大小和質量。如果是一組照片,需要...

  • 筆記本鼠標指針不見了,電腦鼠標指針怎么換

    筆記本鼠標指針不見了,電腦鼠標指針怎么換 相關圖片鼠標指針主題[鼠標指針安裝方法]1。右鍵單擊。Inf并選擇Install。2。在控制面板鼠標指針方案中,選擇相應的主題名稱并應用。電腦打開沒有鼠標指針...

  • xpsp3,xp密鑰sp3

    xpsp3,xp密鑰sp3 相關圖片sp3Windows XP SP3官方中文下載XP SP3簡體中文下載地址:XP SP3官方中文windows xp...

  • 檢查表單,行政檢查表單

    檢查表單,行政檢查表單 相關圖片用電檢查業務表單本教程介紹Dreamweaver來檢查表單行為,可用于為表單1中的每個元素設置有效性規則。Dreamweaver檢查表單行為1。將表單和文本字段插入文檔2中。重網頁制作做表單的單選...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載windowsxpsp3rc2英文軟件簡介微軟已經發布了windowsxpsp3rc2的完整安裝包,XP SP3包含了大量的安全更新和一些組件更新。這個版本可能XP免費升級win10...

  • 語法,英語語法口訣

    語法,英語語法口訣 相關圖片英語語法基礎入門網頁顏色匹配和背景音樂是網頁的背景色,通常為白色。如何做出改變?你可以制作自己的背景圖片應該注意的是,如果背景是相同的顏色或類似的文字,誰知道你在...

關注微信

变脸官网查询