代码之家  ›  专栏  ›  技术社区  ›  keparo

是否将用户选择约束到节点而不使其可编辑?

  •  2
  • keparo  · 技术社区  · 12 年前

    我有以下页面:

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

    我的用户通过选择 .a .b 。浏览器的本机选择行为几乎有效,但我需要防止我的用户进行选择,这跨越了 b .

    是否有方法将用户的选择限制为 <div> ?

    不幸的是,此内容是 用户可编辑-这很不幸,因为设置 contenteditable="true" 在每个上 <div> 实现了我所寻找的约束。

    1 回复  |  直到 12 年前
        1
  •  4
  •   DRD    12 年前

    如何从以下内容开始:

    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/ .