Как я могу использовать JavaScript для выбора текста в pre node/block?

Я понимаю причины безопасности, не позволяющие JS копировать произвольный текст в буфер обмена, но есть ли метод, по которому нажатие кнопки может выбрать текст в pre node, аналогичный тому, как работает функция select() вход?

Я не ищу плагин jQuery, который копирует в буфер обмена. Я просто хочу, чтобы текст в pre-блоке был выделен, чтобы пользователь мог скопировать ctrl-c.

Кажется, я нахожусь на корточках.

ОТВЕТЫ

Ответ 1

Возможно, вы можете изменить тег pre на тег textarea, когда пользователь нажмет на него:

jsFiddle: http://jsfiddle.net/WzBQf/

<button id="btnSelect">Select!</button>
<button id="btnDeselect">Deselect!</button>
<hr />
<div id="text">
    <pre id="txt1">Test</pre>
    <textarea id="txt2" readonly="readonly"></textare>
</div>

И код JavaScript (jQuery):

$("#txt1, #btnSelect").click(function() {
    Select();
});


function Select() {
    $("#txt2").val($("#txt1").html()).show();
    $("#txt1").hide();

    $("#txt2").focus()[0].select();
}

function Deselect() {
    $("#txt1").html($("#txt2").val()).show();
    $("#txt2").hide();
}
$("#txt2").blur(function() {
    Deselect();
});

$("#btnDeselect").click(function() {
    Deselect();
});

Ответ 2

Это то, что вам нужно:

var clip = function(el) {
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
};

И html:

<pre onclick="clip(this);" id="copy_paste"></pre>

Или, если вы хотите программно сделать это:

clip(document.getElementById("copy_paste"));

Или в jquery:

clip($("#copy_paste")[0]);

Вы не можете передать элемент jQuery элемента() в качестве аргумента el. Он даст "TypeError: Аргумент 1 диапазона .selectNodeContents не реализует интерфейс Node."

Ответ 3

Это не слишком сложно. Вам нужны отдельные ветки для IE < 9 и всех других браузеров. Здесь функция для выбора содержимого элемента:

Live demo: http://jsfiddle.net/yQa2w/

код:

function selectElementContents(el) {
    if (window.getSelection && document.createRange) {
        // IE 9 and non-IE
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        // IE < 9
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

Ответ 4

Насколько я знаю, вы не можете выбирать текст вне <input> или <textarea>. Кстати, зачем вам это нужно?

Ответ 6

ОК - это то, что я делаю на основе предложения jsFiddle, и оно работает. Только проблема в том, что у меня нет Windows и в IE, где у меня есть ее копирование в буфер обмена, по-видимому, разрыв строки прерывается, но это не этот вопрос (и я подозреваю, что .replace() может это исправить - мне просто нужен доступ к окна, чтобы играть с IE):

function lineBreakCount(str){
// http://snippets.dzone.com/posts/show/5770
/* counts \n */
try {
    return((str.match(/[^\n]*\n[^\n]*/gi).length));
    } catch(e) {
    return 0;
    }
}

function nodeToCopy($node) {
// For Code Snippets - [AW]
$pre = $node.find('pre:first');
var string = $pre.text();
if (window.clipboardData && clipboardData.setData) {
    clipboardData.setData('text', string);
    } else {
    var n = 1 + lineBreakCount(string);
    $pre.attr('class','nodisplay');
    $pre.after('<textarea readonly="readonly" rows="' + n + '" class="dbg-copycode">' + string.replace(/</g,'&lt;').replace(/>/,'&gt;') + '</textarea>');
    $node.find('textarea:first').focus();
    $node.find('textarea:first').select();
    $node.find('div:last').find('button').replaceWith('<button class="dbg-copycode" type="button" title="Restore syntax highlight">Restore</button>');
    $node.find('div:last').find('button').click(function() {restorePreFromText($(this).parent().parent())});
    }
}

function restorePreFromText($node) {
// For Code Snippets - [AW]
$node.find('pre:first').removeAttr('class');
$node.find('textarea').remove();
$node.find('div:last').find('button').replaceWith('<button class="dbg-copycode" type="button" title="Select code example for copying">Select Code</button>');
$node.find('div:last').find('button').click(function() {nodeToCopy($(this).parent().parent())});
}

$(document).ready(function() {
// For Code Snippets - [AW]
var copybutton = 'Select Code';
var copytitle  = 'Select code example for copying';
if (window.clipboardData && clipboardData.setData) {
    copybutton = 'Copy Code';
    copytitle  = 'Copy code example to clipboard';
    }
$('pre[data-code]').after('<div class="dbg-rbutton"><button class="dbg-copycode" type="button" title="' + copytitle + '">' + copybutton + '</button></div>');
$('.dbg-copycode').click(function() {nodeToCopy($(this).parent().parent())});
});

Причина, по которой я не использую .hide(), где я скрываю предварительный блок, заключается в том, что .hide() добавляет атрибут стиля, который запрещен в соответствии с политикой Mozilla CSP, используемой сервером, поэтому мне нужно установить атрибут класса вместо этого.