Используйте jQuery для автоматического выбора текста внутри тега span при нажатии

Ответ 1

Right. Короткий ответ: вы не можете.

Это, однако, не очень полезно. Итак, если вы готовы принять слегка взломанный подход, по крайней мере с одним оговором, вы можете:

Учитывая html:

<div id="wrap">
    <span class="copyText">This is some text to copy.</span>
    <span>Can't copy <em>this</em> (automatically...)!</span>
    <span class="copyText">And this is yet more text.</span>
</div>

И CSS:

span.copyText {
    position: relative;
    display: block;
}
textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none transparent;
    margin: 0;
    padding: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    font-size: 1em;
}

Вы можете использовать следующий jQuery:

$(document).ready(
    function() {
        $('.copyText').click(
            function() {
                if ($('#tmp').length) {
                    $('#tmp').remove();
                }
                var clickText = $(this).text();
                $('<textarea id="tmp" />')
                    .appendTo($(this))
                    .val(clickText)
                    .focus()
                    .select();
        return false;
    });
$(':not(.copyText)').click(
    function(){
        $('#tmp').remove();
    });

});

С реквизитом JS Fiddle demo, по адресу: http://jsfiddle.net/davidThomas/ZmYBh/.

Основное предостережение состоит в том, что элемент, который вы хотите скопировать, не может (при таком подходе, по крайней мере) обернуть из одной строки в другую (если это также не будет display: block), я подозреваю, что это имеет какое-то отношение к тому, как native form элементы отображаются как "сплошные" прямоугольники, в отличие от большинства других элементов inline, таких как html, которые формируют больше... 'fluid' (?) прямоугольник при обертке).

Однако могут быть и другие.

JS Fiddle demo, чтобы показать, что он работает с текстом обертки, пока элемент родительского контейнера (span) все еще display: block;.

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

Ответ 2

использовать диапазоны DOM: http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

var span = ...
var range = document.createRange();
range.setStartBefore(span.firstChild);
range.setEndAfter(span.lastChild);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Ответ 3

Нашел это решение для ядра и javascript, которое работает хорошо и без взлома: http://coderzone.org/library/Select-text-in-a-DIV-SPAN-or-table-cell_1047.htm

Я взял на себя смелость немного изменить код, чтобы он принял элемент node как аргумент вместо идентификатора элемента.

// Selects text inside an element node.
function selectElementText(el) {
    removeTextSelections();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(el);
        window.getSelection().addRange(range);
    }
}

// Deselects all text in the page.
function removeTextSelections() {
    if (document.selection) document.selection.empty(); 
    else if (window.getSelection) window.getSelection().removeAllRanges();
}

Ответ 4

tbleckert находится на правильном пути. Событие .select() доступно только для ввода, поэтому вам нужно, чтобы ваш <span> стал входом, а затем стилизовал его без фона, без рамки и без фокуса. Затем вы можете сделать это:

<input type="text" style="border:none; background:transparent; outline: none;" class="selectOnClick" />

а затем ваш jQuery будет выглядеть примерно так.

$('input.selectOnClick').click(function(){ $(this).select(); });

Это непроверенный код, но должен указывать вам в правильном направлении.

Ответ 5

Я хотел сделать что-то подобное. На моем веб-сайте есть цитаты, которые я хотел, чтобы пользователи могли легко копировать. Я также хотел добавить имя автора в строку.

Обычно я выбираю user-select для none, поэтому я создал класс, который программно применяется при необходимости...

.editable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
}

Все кавычки находятся в классе под названием "paragraph_quote". Когда посетитель сайта нажимает на цитату, происходит следующая последовательность:

$(".paragraph_quote").on("click", function() {
    var addendum = " [by Author]";

    if (! $(this).attr("contenteditable") || $(this).html().indexOf(addendum) === -1) {     
            $(this).removeData("quote")
            .data("quote", $(this).html())
            .html($(this).html() + addendum)
            .attr("contenteditable", true)
            .addClass("editable")
            .focus()
        ;
    }
    document.execCommand('selectAll', false, null);
}).on("blur", function() {
    $(this).removeClass("editable").html($(this).data("quote"));
});

• Посмотрите, были ли выполнены следующие шаги (то есть, второй раз ли пользователь нажимает в том же абзаце). Если это первый раз, выполните шаги с 2 по 7. Если нет, просто шаг 8.

• Удалите все данные, которые могли быть сохранены, если это не первый раз, когда была нажата цитата.

• Сохраните цитату HTML как данные. Это позволяет вам изменять HTML для копии (если хотите), а затем легко вернуть ее в исходное состояние.

• Добавить дополнительный текст (например, имя автора) в HTML. Не показано ниже: Я также использую .replace() для удаления любых специальных символов HTML, таких как неразрывные пробелы, em-тире и т.д.

• Сделайте редактируемый абзац.

• Добавить редактируемый класс.

• Установите фокус на абзац. Редактируемый класс обеспечивает появление контура фокусировки.

• Выберите весь текст редактируемого абзаца. Не то, чтобы этот шаг был полезен, даже если другие шаги уже предприняты, потому что он заставляет весь выбор повторно подсвечиваться, если пользователь нажимает на выделение.

• Когда пользователь щелкает за пределами абзаца, удалите редактируемый класс и...

• Восстановите HTML до его предыдущего состояния (если вы изменили, как показано на шаге 4 выше).

Ответ 6

Отметьте select() событие:)

Ответ 7

$("span").click(function(){
var mytext  = $(this).text()
})

поместит текст в javascript-переменную... но, возможно, более быстрый взгляд на jQuery Ui, в частности draggable.

Ответ 8

Попробуйте что-нибудь вроде

$('#mySpans span').hover(function() {
    $(this).addClass('spanhover');
}, function() {
    $(this).removeClass('spanhover');
});

где вы динамически добавляете класс "spanhover", который вы определили в своем разделе CSS, например

#mySpans.spanhover {background-color:yellow;}