Highlighting a p tag, but not the one next to it

Question

I have a section on my webpage that the user has to be able to easily select the text so they can paste it somewhere else at any time. My issue is I have two paragraphs right next to each other and when they select one it automatically wants to select the one right next to it.

On my other elements I have something like this to prevent selection at all.

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

but I don't want to prevent them from selecting it at all, just not both at the same time. Is there any way to do this?

This is what the two paragraphs look like enter image description here

What they are currently doing enter image description here

And what I would like them to do enter image description here

My html looks like this

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

The HTML you have presented makes no sense because you are talking about a `
` tag in your title. Please make a fiddle http://jsfiddle.net/ and update your post. — MonkeyZeus, Nov 14 '13 at 18:52
@MonkeyZeus Sorry I forgot the p tags within the div, I was typing too fast — zazvorniki, Nov 14 '13 at 18:59
No problem, would you be able to make a small JSFiddle whch replicates the issue to supplement your post? — MonkeyZeus, Nov 14 '13 at 19:00
@MonkeyZeus http://jsfiddle.net/MgcDU/7987/ I mean their really just p tags with text in them... — zazvorniki, Nov 14 '13 at 19:05
Nevermind, but it sounds like you are looking for some jQuery which binds a `click` event to all `
` tags and changes the CSS of all non-clicked tags to `user-select: none;`. And once the mouse is released then change all `
` tags back to normal `user-select: all;`. Is this correct? — MonkeyZeus, Nov 14 '13 at 19:20
I would have no idea without seeing what you are talking about. But, I guess as long as they were able to highlight it and copy it to their hearts content without accidentally selecting the paragraph next to it. — zazvorniki, Nov 14 '13 at 19:23

score 1 · Accepted Answer · edited May 23 '17 at 12:05

So it seems like you want to highlight the <p> tag where they start highlighting, but not any that also happen to get pulled into the selection? This won't stop the overlapping selection while its in progress, but it will correct it after the fact with some js (no jquery needed in case you aren't using it):

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 );

And the selection function is from this answer:

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();
  }
}

Here is a fiddle.

Thank you so much for your help! Is there anyway to target p tags with certain class names though so I'm not selecting all the p's on the page? — zazvorniki, Nov 14 '13 at 20:41
Yeah your third line would look something like `if(e.target.tagName == "P" && e.target.className == 'single-select') originalEl = e.target;` — hiattp, Nov 14 '13 at 20:45
You rule, you really really do! Thank you! I was trying to do something like that, but I had a . in front of the class name...silly silly me! :) — zazvorniki, Nov 14 '13 at 20:49

score 0 · Answer 2 · answered Nov 14 '13 at 19:50

It sounds like you are looking for some jQuery which binds a click event to all <p> tags and changes the CSS of all non-clicked tags to user-select: none;. And once the mouse is released then change all <p> tags back to normal user-select: all;

My code is kind of resource intensive so you may want to refine selectors to your liking.

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');
        });
    });
});

score 0 · Answer 3 · answered Nov 14 '13 at 20:12

Here is a non-jquery way to do what @MonkeyZeus is suggesting:

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;
}

Fiddle

Highlighting a p tag, but not the one next to it

3 Answers3