HTML瀏覽器「文本」的選擇：選擇整個單詞（如在iBooks的）

我有一個結構：HTML瀏覽器「文本」的選擇：選擇整個單詞（如在iBooks的）

<span class="word">This</span><span class="word">is</span><span class="word">the</span><span class="word">text</span><span>.</span>

我希望用戶能夠做出選擇的整個單詞（跨度的class =「字「）（在桌面和iOS上的瀏覽器 - 就像iBooks一樣）。

我怎樣才能用CSS來設計它呢？

這樣做的正確方法是什麼？（之前沒有選擇）

謝謝。

來源

2012-06-20 WHITECOLOR

你是什麼意思「選擇整個單詞」？他們選擇一個詞時會發生什麼，他們如何選擇一個詞 - 點擊它？突出顯示它？ –

菜單將出現在選擇的頂部。 – WHITECOLOR

相關主頁：http://stackoverflow.com/questions/7809319/get-selected-text-expanded-to-whole-words – kol

我知道你沒有提到jQuery - 但是對於這種動態的東西，我認爲使用它是非常明智的。

把整個交易換成一個div。

<div id="wordSelector"><spans></div>

然後將一個mousedown事件附加到div。使用信號量確保只在mousedown期間處理事件。在跨度上捕獲鼠標懸停事件，直到註冊mouseup事件。

注意：這些事件可能需要附加到文檔而不是div，以確保在div之外但進入div的mousedown事件得到處理，並且使用mouseup以及mouseup事件不在DIV。

var spansTouched = []; 
var mouseDown = 0; 
$("#wordSelector").mousedown(function(){ 
//track spans touched with a semaphore 
mouseDown++; 
}); 
$("#wordSelector").mouseup(function(){ 
mouseDown = 0; 
//handle spansTouched and then reset it to [] 
}); 
$(".word").mouseover(function(){ 
if(mouseDown > 0){ 
    spansTouched.push(this); 
} 
});

顯然有改進的餘地這裏，這就是要突出一個可能的方法使用信號燈和鼠標事件承擔。

來源

2012-06-20 20:14:02

默認情況下它不能在iOS上運行（爲了使這種解決方案能夠處理觸摸和點擊事件，而不是鼠標） – WHITECOLOR

@WHITECOLOR - 在iOS上使用移動瀏覽器時，觸摸事件被視爲mousedown事件。拖動是鼠標懸停的代名詞，mouseup是觸摸事件停止時的代名詞。你做過任何測試嗎？ –

是的mouseover事件不是在iPad上拖動（https://developer.apple。COM /庫/狩獵/＃文檔/ AppleApplications /參考/ SafariWebContent/HandlingEvents/HandlingEvents.html）。這就是爲什麼我在尋找「標準解決方案」，而不是通過事件處理。它應該工作。它在亞馬遜kindle雲端閱讀器（它的HTML5電子書閱讀器）中工作 – WHITECOLOR

不確定你的意思是用戶應該選擇一個單詞。如果用戶通過點擊它來「選擇」一個單詞，那麼可以使用像TipTip或任何其他tooltip-plugin這樣的jQuery插件。至少提示支持點擊。

不確定是否有任何工具提示插件默認支持在突出顯示文本時觸發，但使用JavaScript偵聽文本突出顯示並觸發相應的工具提示以手動顯示，並在文本爲取消。

戴夫威爾士寫了small piece of jQuery嗅探文本選擇，可以利用。

來源

2012-06-20 20:14:15

我還需要該選擇才能在iOS（平板電腦）上工作，它會工作嗎？我不需要工具提示，只是一個適用於iOS的選擇。 – WHITECOLOR

@WHITECOLOR剛在我的iPad上試過了，不幸的是它似乎不能很好地工作。對於那個很抱歉。 –

有沒有在iPad上拖動鼠標懸停事件。這就是我尋找標準解決方案的原因。它應該工作。它在amazon kindle雲端閱讀器（它的HTML5電子書閱讀器）中工作 – WHITECOLOR

HTML瀏覽器「文本」的選擇：選擇整個單詞（如在iBooks的）

回答

相關問題