Я бы хотел, чтобы пользователи нажимали ссылку, а затем выбирал текст 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();
}

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

Обычный Javascript

function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));
<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

Вот рабочая демонстрация . Для тех из вас, кто ищет плагин jQuery, я сделал одно из этих слишком Глядя на вывод


jQuery (оригинальный ответ)

Я нашел решение для этого в этот поток . Мне удалось изменить предоставленную информацию и смешать ее с небольшим количеством jQuery, чтобы создать совершенно потрясающую функцию для выделения текста в любом элементе, независимо от браузера:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

Вот версия без перехвата браузера и без опоры на jQuery:

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

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

Код Джейсона нельзя использовать для элементов внутри iframe (поскольку область действия отличается от окна и документа). Я исправил эту проблему и изменил ее, чтобы использовать ее как любой другой плагин jQuery (цепной):

Пример 1: выделение всего текста внутри & Кода & Lt ; & Gt ; одним щелчком мыши и добавление класса «selected»:

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

Пример 2: При нажатии кнопки выберите элемент внутри Iframe:

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

Примечание: помните, что источник iframe должен находиться в том же домене, чтобы предотвратить ошибки безопасности.

jQuery:

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

Я тестировал его в IE8, Firefox, Opera, Safari, Chrome (текущие версии). Я не уверен, работает ли он в старых версиях IE (искренне, мне все равно).

this thread содержит действительно замечательные вещи. Но я не могу сделать это прямо на этой странице, используя FF 3.5b99 FireBug из-за «Ошибка безопасности».

Yipee !! Я смог выбрать всю правую боковую панель с этим кодом, надеюсь, он вам поможет:

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

PS: — Я не смог использовать объекты, возвращаемые селекторами jquery, например

   var w=$("div.welovestackoverflow",$("div.sidebar"));

   //this throws **security exception**

   r.selectNodeContents(w);

Я искал то же самое, мое решение было таким:

$('#el-id').focus().select();

FormData:

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

Эта функция может быть вызвана следующим образом:

$('#selectme').selectText();

Мне понравился ответ Лепе, за исключением нескольких вещей:

  1. Обнаружение браузера, jQuery или нет не оптимально
  2. DRY
  3. не работает в IE8, если родительский объект obj не поддерживает createTextRange
  4. Chrome не могут использовать setBaseAndExtent Не будет выделять текст, охватывающий несколько элементов DOM (элементов внутри «выбранного» элемента). Другими словами, если вы называете
  5. selText вычитанием для div, содержащего несколько элементов span, не выберите текст каждого из этих элементов. Для меня это было нарушением соглашения, YMMV.

работает только с числами, так что это то же самое, что: , так как Глядя на вывод

selectText:function(){

    var range,
        selection,
        obj = this[0],
        type = {
            func:'function',
            obj:'object'
        },
        // Convenience
        is = function(type, o){
            return typeof o === type;
        };

    if(is(type.obj, obj.ownerDocument)
        && is(type.obj, obj.ownerDocument.defaultView)
        && is(type.func, obj.ownerDocument.defaultView.getSelection)){

        selection = obj.ownerDocument.defaultView.getSelection();

        if(is(type.func, selection.setBaseAndExtent)){
            // Chrome, Safari - nice and easy
            selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
        }
        else if(is(type.func, obj.ownerDocument.createRange)){

            range = obj.ownerDocument.createRange();

            if(is(type.func, range.selectNodeContents)
                && is(type.func, selection.removeAllRanges)
                && is(type.func, selection.addRange)){
                // Mozilla
                range.selectNodeContents(obj);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {

        range = document.body.createTextRange();

        if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
            // IE most likely
            range.moveToElementText(obj);
            range.select();
        }
    }

    // Chainable
    return this;
}

Начиная с jQuery 1.7, метод .live () устарел. Используйте .on (), чтобы прикрепить обработчики событий. Пользователи более старых версий jQuery должны использовать .delegate () вместо .live ().

приводит к Я забыл указать, как связать это с кодом операции:

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

Cheers

Для поддержки того, что было передано ранее.

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

http://jsfiddle.net/KcX6A/326/

Для любого тега можно выбрать весь текст внутри этого тега с помощью этого короткого и простого кода. Он выделит всю область тега желтым цветом и выделит текст внутри него одним щелчком мыши.

<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
        $(".selectText").each(function(indx) {
                $(this).click(function() {                 
                    $('pre').eq(indx).selText().addClass("selected");
                        return false;               
                    });
        });
  });

Пользователь намеревается добавить два числа, результат: 3

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

(движок Gecko) и Объект выбора объект TextRange Примитивы JavaScript: string, number, null, undefined и логический (Символ скоро появится в ES6). Любое другое значение является объектом (например, массивами, функциями и объектами). Процесс приведения для преобразования объектов в примитивные значения описывается следующим образом: (движок Trident.) Я не знаю ни о каких фреймворках JavaScript, которые имеют кросс-браузер Поддержка этого реализована, но я никогда не искал ее, так что возможно, что даже в jQuery она есть.

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

range.moveToElementText(text);

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

range.moveToElementText(el);

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

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

вот еще одно простое решение для получения выделенного текста в виде строки. Вы можете легко использовать эту строку, чтобы добавить дочерний элемент 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();

) вы можете использовать select():

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

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

Мой конкретный вариант использования заключался в выборе текстового диапазона внутри редактируемого элемента 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);

Другая соответствующая документация:
или что-то подобное вашим классам, и специфика вашей проблемной области определит что именно это значит.
Selection
Document.createRange ()
Window.getSelection ()

в jQuery.browser.webkit все создают новые дочерние области, поэтому проблема часто проявляется, когда задействованы эти директивы. (См.

Сделал этот скрипт ниже для выбора содержимого в событии <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 );
        }
    } );
} );