2011-06-14 110 views
11

更新Chrome中的非連續選擇?

其間的部分你想未選擇或隱藏,然後向他們展示我最近發現,你可以通過編程創建Chrome的選項,即是不連續的,方法是更換元件/ textnodes。

非連續選擇的實施例爲鉻:http://jsfiddle.net/niklasvh/YKJBW/

var t = $('div').contents().get(0); 


$.each(t.nodeValue.split(" "),function(i,e){ 
    t = t.splitText(e.length); 
    if (t.length>0){ 
    t = t.splitText(1); 
    } 
}); 



var c = $('div').contents(); 

$.each(c,function(i,e){  
    if (i>0){ 
    if (i%3) { }else{ 
      e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);       
    }  
} 
}); 

$('unselect').hide(); 
window.setTimeout(function(){ 
    $('unselect').show();  
},0); 

然而執行復制事件時,整個選擇並獲取所選(即使它具有在其之間的間隙),但當然可以使用相同的方法在執行復制事件之前以編程方式更改選擇。

現在棘手的部分是,您可以通過按住Ctrl鍵來像Firefox中一樣創建非連續選擇,從而實際上使此功能可用。我在示例中使用的當前方法將TextNodes分解爲許多部分,對於視覺目的來說沒有區別。然而,它也使用額外的標籤來打破選擇,據我所知,它不能被刪除。但是,可以通過刪除TextNode併爲其添加新的TextNode來實現相同的功能。問題在於它只考慮添加的最後一個節點,所以如果您的選擇中有多個空格,它將只考慮您應用的最後一次DOM更改。

任何人都可以想到任何非文件打破方式來應用這種非連續選擇其中不會對選擇及其元素做出任何永久性更改嗎?

原來的問題

是否有可能作出的選擇這是在谷歌瀏覽器不連續?例如,如果您有文字像這樣的元素:

<div>this is some random text</div>

是否有可能進行選擇含有例如this istext使文字在兩者之間未選擇?

這似乎在FF中正常工作,在那裏你可以addRanges這是不相鄰的,並作出相應的選擇。

對於IE來說,似乎沒有任何東西可以讓你有多個範圍,但IE的選擇對象有很多其他的方法可以彌補它。

使用非連續選擇,您可以隨時追加或預先從網站的某個部分選擇某個部分,例如執行復制操作時,或強制用戶取消選擇某些他們不想選擇的部分複製。非連續選擇

實施例:

enter image description here

working example(在FF4至少工作)。

編輯 要手動執行同一類型的選擇,你可以用Firefox按住CTRL鍵來,開始在不同的位置拖動文本,但對鉻進行它不工作。

編輯2 我猜thisthis概括起來相當不錯。就webkit瀏覽器而言,看起來沒有什麼值得期待的事情。

+0

這是一個代碼問題,它是關於JavaScript的 - 請參閱上面的內容:您可以在哪裏「addRanges」 – 2011-06-14 20:33:06

+1

這些示例對於討厭用戶而言聽起來都很有用。 (從好的一面來看,現在我知道這樣做的網站是如何做到的,我可以採取對策) – Random832 2011-06-14 20:33:27

+1

@ Random832有些客戶希望避免某些內容被複制,並試圖從剪貼板中刪除該內容而不是製作例如,所有的內容成爲圖像,聽起來像是一個更「用戶友好」的解決方案。就反措施而言,客戶端的任何事情總是可以繞開,這不是一個讓它變得不可能的問題,而是讓用戶注意他們正在做的事情,他們不應該這樣做。 – Niklas 2011-06-14 21:11:31

回答

4

編號Firefox是唯一支持多個選定範圍的主流瀏覽器。我認爲它的主要用例是允許選擇表格中的各個列,否則不可能。

WebKit不打算在任何時候支持多個選定的範圍,從我可以收集。 IE瀏覽器修改了IE 9的範圍和選擇API,但沒有實現它。不知道Opera是否有計劃支持它。請參閱this thread from the WHATWG mailing list以獲取一些信息:

0

不,沒有多個文本跨度選擇的概念。選擇與插入符號相關聯。一個插入符號 - 一個選擇。

+0

如果是這樣的話,它是如何與Firefox合作的?當然,其中一個瀏覽器做得不正確,或者結果會一致? – Niklas 2011-06-14 21:27:13

+0

@Niklas:不知道說實話。文本選擇包含兩點anchorPos和caretPos。因此,如果您有選擇並將插入符號向左/向右移動,選擇將被刪除,並且caretPos將用作參考點。我不知道多重選擇將如何發揮。 – 2011-06-14 22:36:53