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

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

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

Кажется, я нахожусь в приседе.

Источник

6 ответов

Решение

Может быть, вы могли бы изменить 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();
});
Источник

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

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 clip() в качестве аргумента el. Это даст "TypeError: Аргумент 1 из Range.selectNodeContents не реализует интерфейсный узел".

Источник

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

Живая демоверсия: 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();
    }
}
Источник

Взгляни на

https://developer.mozilla.org/it/DOM/window.getSelection

это не совместимо со всеми браузерами мэра, первая реализация IE в версии 9

но в старых IE есть какой-то альтернативный API в document.selection, который кажется эквивалентным

http://msdn.microsoft.com/en-us/library/ms535869%28v=vs.85%29.aspx

удачи!

Источник

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

Источник

ОК - это то, что я делаю, основываясь на предложении jsFiddle, и это работает. Единственная проблема заключается в том, что у меня нет Windows, а в IE, где она у меня есть, скопируйте ее в буфер обмена, очевидно, разрывы строк нарушены, но это не тот вопрос (и я подозреваю, что.replace() может это исправить - мне просто нужен доступ к Windows, чтобы играть с 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, которую использует сервер, поэтому вместо этого я должен установить атрибут класса.

Источник
Другие вопросы по тегам