2

我有一个结构：

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

我希望用户能够选择整个单词（spans，class="words"）（在桌面和 iOS 上的浏览​​器中 - 就像在 iBooks 中一样）。

我怎样才能用css设计它？

这样做的正确方法是什么？（之前没有与选择一起使用）

谢谢。

4

2 回答 2

1

我知道你没有提到 jQuery - 但是对于这种动态的东西，我认为使用它是非常可取的。

将整个交易包装在一个 div 中。

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

然后将 mousedown 事件附加到 div。使用信号量确保仅在鼠标按下期间处理事件。捕获跨度上的 mouseover 事件，直到注册 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-20T20:14:02.913 回答
0

不知道你的意思是用户应该选择一个词。如果用户应该通过单击来“选择”一个单词，您可以使用 jQuery 插件，如TipTip或任何其他tooltip-plugin。至少tiptip支持点击。

不确定是否有任何工具提示插件默认支持触发文本突出显示，但使用 JavaScript 侦听文本突出显示并触发适当的工具提示以手动显示，如果取消选择文本，则再次隐藏它。

Dave Welsh 编写了一小段 jQuery来嗅探文本选择，可以使用它。

于 2012-06-20T20:14:15.803 回答