如何停用文字與影像的選取功能 (HTML)

Applies to Windows and Windows Phone

了解如何將使用 JavaScript 的 Windows 市集應用程式 UI 中的文字和影像選取功能停用。

依照預設,使用者無法選取使用 JavaScript 的 Windows 市集應用程式 UI 中的內容。

若要允許選取包含文字、影像及其他非專有內容的元素,可以使用階層式樣式表 (CSS) 屬性 -ms-user-select 覆寫此預設行為。

-ms-user-select 屬性支援下列值:

無法在元素內選取。不過,元素本身可以包含在選取範圍內。這是頂層 body 元素的預設行為,且使用 JavaScript 的 Windows 市集應用程式中的所有 UI 元素皆繼承此行為。

元素

可以在元素 (及所有子元素) 內選取。不過,選取範圍僅限於元素的界限內。

文字

可以在元素內選取,並且不限於元素的界限內。

附註  若要分享內容以及複製到剪貼簿或從剪貼簿貼上,必須設定此屬性。

您必須知道的事

技術

先決條件

這個主題假設您可以利用 JavaScript,以適用於 JavaScript 的 Windows Library 範本建立基本的 Windows 市集應用程式。

指示

選取行為

對於具有已定義 clickMSGestureTapmouseup 事件處理常式之父項元素的物件,選取功能是停用的。

若要覆寫此行為,並在即使 clickMSGestureTapmouseup 處理程式已存在的情況下啟用選取功能,您必須套用 touch-select CSS 屬性至物件並指派 grippers 作為屬性的值。

如果從下列任一事件處理程式呼叫 preventDefault,就會取消選取:

停用所有 UI 元素的選取功能

在某些情況下,您可能會想要將應用程式內所有 UI 元素的選取功能都停用。

下列範例是透過將 -ms-user-select 搭配屬性值 none 套用至 <html> 元素和所有可編輯的子元素,將所有 UI 元素從選取範圍中排除。

附註  建議您也將 cursor 屬性的值設定為 default 以確保所有元素都產生一致的 UI 回饋。


html  input, textarea, *[contenteditable=true] 
{
    -ms-user-select: none;
    cursor: default;
}

啟用不可編輯的 UI 元素的選取功能

如果您已經將應用程式中的選取功能全面停用,但想要針對特定 UI 元素的內容覆寫這項設定,只需將 -ms-user-select 屬性套用至該元素,並將屬性值設定為 element。這會將選取範圍限制在元素的界限內。

下列範例會允許選取具指定識別碼的元素的內容 (包括子元素的內容)。

附註  建議您也將 cursor 屬性的值明確設定為 text,以區別這個元素的 UI 回饋。


#selectableDiv 
{
    -ms-user-select: element;
    cursor: text;
}

相關主題

選取文字和影像的指導方針
範例
包含 -ms-user-select CSS 屬性的無法選取內容區域範例

 

 

顯示:
© 2014 Microsoft