Question

我有以下页面：

<div class="a">
  ...
</div>
<div class="b">
  ...
</div>

我的用户通过选择.a和.b中的各种文字来与此页面进行互动。浏览器的原生选择行为几乎可以使用，但我需要阻止我的用户进行选择，这些选择跨越.a和.b之间的边界。

有没有办法将用户的选择限制在<div>？

不幸的是，此内容不用户可编辑 - 这很不幸，因为在contenteditable="true"上设置<div>会达到我正在寻找的约束。

Answer 1

从这开头怎么样：

HTML：

<div class = "a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
    Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus. 
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.noSelection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div + div {
    padding-top: 10px;
}

jQuery的：

$(function() {
    $("div").hover(function() {
        $(this).siblings("div").toggleClass("noSelection");    
    });
});

这是一个小提琴：http://jsfiddle.net/J2fJz/。

将用户选择限制在节点而不使其可编辑？

1 个答案: