Question

我正在制作一个小型文本编辑器，为此，当用户选择一些文本时，我希望产生类似的效果：http://raphaelcruzeiro.github.io/jquery-notebook/

我正在考虑使用jQuery select事件，但我似乎无法在div上工作，只能在输入字段上工作。

<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>

<script>
$(".writing-area").select(function(){
    alert("Text marked!");
  });
</script>

您可以在此处看到演示：http://jsfiddle.net/WL2nz/ 已经过时的HTML工作正常，但div版本没有。

我做错了什么？可以选择不在div上使用吗？

Answer 1

select event的MDN参考说HTML5规范只定义了输入和textareas的select事件。

Answer 2

根据jQuery docs，＆＃34;此活动仅限于字段和框＆＃34;。

Answer 3

从jQuery页面（http://api.jquery.com/select/）获取.select（）函数：

“当用户在其中进行文本选择时，select事件将发送到元素。此事件仅限于字段和框。”

要获得您所寻找的效果，您是否考虑过使用可点击元素进行onmouseover或onclick？

此外，Dojo Toolkit是一个你可以获得一个很好的工具提示来制作类似于你想要的东西的地方：点击here

Answer 4

所有答案都是正确的，但您链接的插件是这样做的：

使用键盘或鼠标（keyup，focus，mouseup ...）后，插件会检查是否选择了某些内容。如果选择了某些内容，则会弹出气泡。

代码为here

Answer 5

我们在悬停文本时突出显示div文本的颜色，并在不悬停文本时删除颜色。

$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
 },function(){
$(".writing-area").css('color','');
});

http://jsfiddle.net/WL2nz/4/

jQuery选择div内容

5 个答案: