HTML 浏览器的“文本”选择:选择整个单词(如在 iBooks 中）

HTML browser "text" selection: select whole words (like in iBooks)

本文关键字：选择 单词 如在 iBooks 浏览器 文本 HTML      更新时间：2023-09-26

>我有一个结构：

<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 设置它的样式？

正确的方法是什么？（以前没有使用过选择）

谢谢。

我知道

你没有提到jQuery - 但是对于这种动态的东西，我认为强烈建议使用它。

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

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

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

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

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

不确定用户应该选择一个单词是什么意思。如果用户应该通过单击"选择"一个单词，您可以使用jQuery插件，如TipTip或任何其他工具提示插件。至少提示支持点击。

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

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

相关文章：