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的）

回答

相关问题