Выделение текста в элементе (сродни выделению мышью)

Question

Я бы хотел, чтобы пользователи нажимали на ссылку, а затем он выбирал HTML-текст в другом элементе ( не вход).

Под «выделением» я подразумеваю то же самое, что и при выделении текста, перетаскивая мышку над ним. Это было непросто для исследования, потому что все говорят о «выберите» или «выделить» в других терминах.

Возможно ли это? Мой код пока:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) {
    $("#" + element).select();
}

Я упускаю что-то явно очевидное?

Answer 1

Посмотрите на объект Selection (движок Gecko) и TextRange объект (движок Trident.) Я не знаю ни о каких фреймворках JavaScript, которые поддерживают кросс-браузер для этого реализовано, но я никогда не искал его, так что вполне возможно, что даже jQuery имеет это.

Answer 2

вот еще одно простое решение для получения выделенного текста в виде строки, вы можете легко использовать эту строку для добавления дочернего элемента div в ваш код:

var text = '';

if (window.getSelection) {
    text = window.getSelection();

} else if (document.getSelection) {
    text = document.getSelection();

} else if (document.selection) {
    text = document.selection.createRange().text;
}

text = text.toString();

Answer 3

Метод Тима отлично подходит для моего случая - выделение текста в div для IE и FF после того, как я заменил следующий оператор:

range.moveToElementText(text);

со следующим:

range.moveToElementText(el);

Текст в элементе div выбирается щелчком по следующей функции jQuery:

$(function () {
    $("#divFoo").click(function () {
        selectElementText(document.getElementById("divFoo"));
    })
});

Answer 4

Мой конкретный вариант использования заключался в выборе текстового диапазона внутри редактируемого элемента span, который, насколько я мог видеть, не описан ни в одном из ответов здесь.

Основное отличие состоит в том, что вы должны передать узел типа Text объекту Range, как описано в документации Range.setStart () :

Если startNode является узлом типа Text, Comment или CDATASection , затем startOffset - это количество символов от начала startNode. Для других типов узлов, startOffset - это число дочерних узлы между началом startNode.

Узел Text является первым дочерним узлом элемента span, поэтому чтобы получить его, перейдите к childNodes[0] элемента span. Остальное такое же, как и в большинстве других ответов.

Вот пример кода:

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

Другая соответствующая документация:
Диапазон
Выбор
Document.createRange ()
Window.getSelection ()

Answer 5

Добавлено jQuery.browser.webkit в "else if" для Chrome. Не удалось заставить это работать в Chrome 23.

Сделал этот скрипт ниже для выбора содержимого в теге <pre>, который имеет class="code".

jQuery( document ).ready(function() {
    jQuery('pre.code').attr('title', 'Click to select all');
    jQuery( '#divFoo' ).click( function() {
        var refNode = jQuery( this )[0];
        if ( jQuery.browser.msie ) {
            var range = document.body.createTextRange();
            range.moveToElementText( refNode );
            range.select();
        } else if ( jQuery.browser.mozilla || jQuery.browser.opera  || jQuery.browser.webkit ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            console.log(selection);
            var range = refNode.ownerDocument.createRange();
            range.selectNodeContents( refNode );
            selection.removeAllRanges();
            selection.addRange( range );
        } else if ( jQuery.browser.safari ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            selection.setBaseAndExtent( refNode, 0, refNode, 1 );
        }
    } );
} );

Answer 6

Согласно документации jQuery select():

Инициировать событие выбора каждого соответствующего элемента. Это приводит к выполнению всех функций, связанных с этим событием select, и вызывает действие выбора по умолчанию браузера для соответствующих элементов.

Вот ваше объяснение, почему jQuery select() не будет работать в этом случае.