JQuery выделите внутренний текст Div, OnClick

Question

Я пытаюсь автоматически выделить текст <pre> чтобы легче было копировать... Вот с чем я работал:

jQuery( document ).ready( function() {
  $( 'pre' ).click( function() {
    $( this ).select();
    
    var doc = document
    , text = $( this )
    , range, selection;

    if( doc.body.createTextRange ) {
      range = document.body.createTextRange();
      range.moveToElementText( text );
      range.select();
    } else if( window.getSelection ) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents( text );
      selection.removeAllRanges();
      selection.addRange( range );
    }
  } );
} );

pre {cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>This is Text</pre>

Все сообщения, которые я искал, ссылаются на "выделение" как цвет фона, но я хочу выделить его, чтобы пользователь мог легко его скопировать. Как я могу изменить JS выше, чтобы, когда пользователь нажимает на текст, он выделял его?

Answer 1

Ваш код в значительной степени точен. Есть только одно небольшое изменение, которое нужно сделать.

text = $(this)

должен стать

text = this

Функции, которые вы используете text в качестве параметра используются методы JavaScript Vanilla, поэтому ожидается наличие узла DOM, а не объекта jQuery. "Это" само по себе в данном случае является узлом DOM. Но, оборачивая его в $(), он превращается в объект jQuery, который затем не может использоваться функциями, которые вы вызываете позже.

jQuery( document ).ready( function() {
  $( 'pre' ).click( function() {
    $( this ).select();
    
    var doc = document
    , text = this
    , range, selection;

    if( doc.body.createTextRange ) {
      range = document.body.createTextRange();
      range.moveToElementText( text );
      range.select();
    } else if( window.getSelection ) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents( text );
      selection.removeAllRanges();
      selection.addRange( range );
    }
  } );
} );

pre {cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>This is Text</pre>