0

我的网页上有一个部分，用户必须能够轻松选择文本，以便他们可以随时将其粘贴到其他地方。我的问题是我有两个相邻的段落，当他们选择一个时，它会自动选择它旁边的一个。

在我的其他元素上，我有类似的东西来防止选择。

-webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;

但我根本不想阻止他们选择它，只是不能同时选择两者。有没有办法做到这一点？

这是两段的样子 在此处输入图像描述

他们目前在做什么 在此处输入图像描述

我希望他们做什么 在此处输入图像描述

我的 html 看起来像这样

<div class="span12">
  <h4>Title</h4>
  <div class="span3">Photo</div>
  <div class="span4"><p>Text</p></div>
  <div class="span5"><p>Text</p></div>
</div>
4

3 回答 3

1

因此，您似乎想突出显示<p>它们开始突出显示的标签，但不是任何也恰好被拉入选择的标签？这不会在进行中停止重叠选择，但会在事后用一些 js 纠正它（如果您不使用它，则不需要 jquery）：

var originalEl;
document.addEventListener('mousedown', function(e){
  if(e.target.tagName == "P") originalEl = e.target;
  else originalEl = null;
});

document.addEventListener('mouseup', function ( e ) {
  if(originalEl) selectElementText(originalEl);
}, false );

选择功能来自这个答案：

function selectElementText(el, win) {
  win = win || window;
  var doc = win.document, sel, range;
  if (win.getSelection && doc.createRange) {
    sel = win.getSelection();
    range = doc.createRange();
    range.selectNodeContents(el);
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (doc.body.createTextRange) {
    range = doc.body.createTextRange();
    range.moveToElementText(el);
    range.select();
  }
}

这是一个小提琴。

于 2013-11-14T19:49:51.147 回答
0

听起来您正在寻找一些 jQuery，它将点击事件绑定到所有<p>标签并将所有未点击标签的 CSS 更改为user-select: none;. 释放鼠标后，将所有<p>标签恢复正常user-select: all;

我的代码是资源密集型的，因此您可能希望根据自己的喜好细化选择器。

JSFiddle

HTML

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partu
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>

CSS

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

JS

$(document).ready(function(){

    // Mouse was clicked down
    $(document).on('mousedown', 'p', function(){

        // Give all <p> tags an ID if they do not have one
        var i = 1;
        $('p').each(function(){

            if(!$(this).attr('id')){
                $(this).attr({'id':'unique_'+i+'id'});
            }

            i += 1;
        });

        var p_clicked = $(this);
        var p_clicked_id = p_clicked.attr('id');

        // Loop through <p> tags and add the .select_off class
        $('p').each(function(){
            if($(this).attr('id') != p_clicked_id){
                $(this).addClass('select_off');
            }
        });
    });

    // Mouse was released
    $(document).on('mouseup', 'p', function(){

        // Loop through <p> tags and remove the .select_off class
        $('p').each(function(){
            $(this).removeClass('select_off');
        });
    });
});
于 2013-11-14T19:50:36.090 回答
0

这是一种非 jquery 方式来执行@MonkeyZeus 的建议：

JS

var originalEl;
document.addEventListener('mousedown', function(e){
  if(originalEl) originalEl.className = "";
  if(e.target.tagName == "P"){
    originalEl = e.target;
    originalEl.className = "select-on";
  } else originalEl = null;
});

CSS

p{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

p.select-on{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -o-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

小提琴

于 2013-11-14T20:12:11.743 回答