2012-07-03 49 views
4

我有一個要求,除了input [type = text]元素之外的所有內容禁止在網頁上選擇。disableselection除了輸入[type = text]

This accepted answer到一個類似的問題幾乎沒有技巧,但它不禁止選擇包含輸入[type = text]元素的容器。因此,用戶仍然可以通過從這些容器中的一個內啓動拖動操作來進行選擇。

這是否可能,即是否可以禁用容器元素的選擇,同時爲子元素(特別是子輸入=文本元素)啓用它。

@Pointy,「爲什麼不先取出那個.not()調用?」

取出第一.not呼叫,會給:

$('body').not('input').disableSelection(); 

其中,如在鏈接的問題指出,仍然會在頁面上禁用的一切,包括輸入[類型=文本]元素。

@大衛·托馬斯,「你有一個現場演示......」

我沒有現場演示,但它是相當微不足道。例如,帶有一些填充的div包含一個輸入[type = text]元素。其結果是:

  • 隨着$('body').not('input').disableSelection(); selectiopn對所有的頁面關閉,其中包括輸入元素。

  • With $('body *').not(':has(input)').not('input').disableSelection();對於不包含輸入元素的所有元素,禁用選擇。但是可以通過從包含輸入元素的容器中開始拖動操作來選擇整個頁面。

+2

爲什麼不只是取出該第一個'。不()'呼叫? – Pointy

+0

到目前爲止,你有什麼?([SSCCE](http://sscce.org/))HTML?你有現場演示,我們可以看到工作,或失敗? –

回答

1

我發現了一個解決方案,它可以做我想做的事情,並且會對jquery/javascript專家的評論/改進感興趣。

$(document).ready(function() { 
    $("body").disableSelection(); 

    $("body").delegate('input[type=text],textarea', "focus", function() { 
     $("body").enableSelection(); 
    }); 

    $("body").delegate("input[type=text],textarea", "blur", function() { 
     $("body").disableSelection(); 
    }); 
}); 

當文本框(輸入[類型=文本]或文本域)具有焦點,然後用鼠標拖動僅選擇文本框內的文本。因此,在文本框具有焦點(在焦點和模糊事件之間)時啓用對整個頁面的選擇是「安全的」。

在IE8/9上的文本框之間切換時會有明顯的延遲。 Google Chrome瀏覽器不太明顯,我知道它具有更快的JavaScript引擎。所以我可以忍受性能的影響,特別是IE10將會擁有更快的JavaScript引擎。

UPDATE

當使用ASP.NET UpdatePanel,這需要修改每個局部回發後禁用選擇:

Sys.Application.add_load(function() { 
    $("body").disableSelection(); 
}); 
+0

很酷。另一個很酷的方式來解決侷限性。 – RustyTheBoyRobot

0

試試這個,雖然是同樣的什麼你已經在使用:

$('* :not(input)').disableSelection(); 

我不明白,雖然你爲什麼要使用整個body元素,而不是縮小它文本節點(p,h [..],ul,ol等)

我同意@David Thomas - 看到您正在處理的測試頁會更容易。

1

好吧,收起你的吊帶,並準備好真的很髒的破解

免責聲明:

我不認爲這是做事情的好辦法。我只是想解決獲得OP所需功能的挑戰。如果其他人能夠以更清潔的方式使其工作,請發佈。


玩弄的disableSelection()功能後,它似乎是,如果一個父元素已被禁用,所有的孩子將不能選擇,以及(請糾正我,如果我錯了)。所以,我決定,如果你想要除了小部件外,其他所有的都是無法選擇的,你可以把所有的標記放在一個不可選擇的<div>中,並使用絕對定位來放置<input>標記的可選克隆(或任何標記)的不可選擇的。這些克隆將駐留在未禁用的第二個<div>中。

下面是這個想法的一個例子:http://jsfiddle.net/pnCxE/2/

缺點:

  • 造型成爲大傷腦筋。任何依賴父級樣式(即位置,大小,顏色等)的元素都無法克隆,因爲克隆位於不同的位置。
  • 由於(再次)克隆與克隆元素不在同一個位置,表單變得難以管理。
  • 您必須處理命名衝突,因爲克隆將具有與克隆元素相同的ID。 (這是可行的,我只是不希望,因爲它可能會需要特別注意通過使用這種想法的人的代碼吧)

所以,當你可以工作圍繞可選擇的限制,你可能會更好關閉只接受容器選擇。在將此代碼放入生產環境之前,我會認真考慮。

+0

+1的創意解決方案。然而,除了你提到的缺點之外,它並不能完全達到我想要的效果 - 可以通過從可選區域內開始拖動操作來選擇「不可選」文本(例如在按鈕下方或從可選的'p'元素)。 – Joe

+0

@Joe - 從按鈕下方開始拖動只能是因爲它是jsFiddle;如果您檢查HTML,那麼按鈕下方的所有內容都不在''標記之外。如果您在不使用'