Question

我有一个结构：

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

我希望用户能够选择整个单词（跨度，类=＆＃34;单词＆＃34;）（在桌面和iOS上的浏览器中 - 就像在iBooks中一样）。

我怎样才能用css设计它？

这样做的正确方法是什么？（之前没有选择过）

感谢。

Answer 1

我知道你没有提到jQuery - 但是有了这种动态，我认为使用它是非常明智的。

将整个交易包裹在div中。

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

然后将mousedown事件附加到div。使用信号量确保仅在mousedown期间处理事件。捕获跨度上的鼠标悬停事件，直到注册mouseup事件。

注意：这些事件可能需要附加到文档而不是div，以确保处理div之外的mousedown事件但是进入div，并且使用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);
 }
});

显然这里有改进的余地，这只是为了强调使用信号量和鼠标事件的可能方法。

Answer 2

不确定用户应该选择单词的意思。如果用户应通过单击“选择”某个单词，则可以使用jQuery插件，如TipTip或任何其他tooltip-plugin。至少tiptip支持点击。

默认情况下，不确定是否有任何工具提示插件支持触发突出显示的文本，但使用JavaScript监听文本突出显示并触发相应的工具提示以手动显示，并在取消选择文本时再次隐藏它

戴夫·威尔士写了small piece of jQuery来嗅探文字选择，可以利用。

HTML浏览器“文本”选择：选择整个单词（如在iBooks中）

2 个答案: