Используйте jQuery select (), чтобы выбрать содержимое div - PullRequest
Новая
       19

Используйте jQuery select (), чтобы выбрать содержимое div

5 голосов
/ 02 апреля 2012

Можно ли использовать или адаптировать .select () jQuery для установки диапазона выбора для всего содержимого div?

У меня есть div, в котором есть серия меток, входов, объектов выбора и пара других элементов пользовательского интерфейса. Я нашел код в отдельном посте StackOverflow с кодом, размещенным на jsFiddle: http://jsfiddle.net/KcX6A/570/

Может ли это быть адаптировано для выбора значения входов также? Или как бы вы посоветовали мне заняться этим?

Спасибо, Конор

Редактировать: Подробнее

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

В моем div у меня есть ряд различных типов элементов, включая входы, метки, выборки и т. Д. Мне нужен общий выбор всех элементов. Ссылка jsFiddle, которую я добавил ранее, показывает, как установить диапазон элемента div и выбрать текст элементов, таких как теги p и т. Д. Что мне нужно, это установить диапазон содержимого элемента div, а когда я нажимаю ctrl + c или cmd + c, это копирует значения входов, а также метки.

Итак, подведем итог: использование .val и .select для этого не сработает, я не думаю. Мне нужно каким-то образом объединить вышесказанное, но я точно не знаю, как это будет достигнуто. Есть идеи?

Ответы [ 4 ]

15 голосов
/ 02 апреля 2012

Проверьте эту скрипту: http://jsfiddle.net/JAq2e/

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

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

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

Код: 

$('.select-text').on('click', function(e) {
    var selector = $(this).data('selector');
    $(selector).selectText();
    e.preventDefault();
});

Использование:

<a href="#" class="select-text" data-selector="#some-container">Select all</a>
<div id="some-container">some text</div>

Демонстрация: см. js fiddle

1 голос
/ 02 апреля 2012

Если вы хотите выбрать элементы ввода вместе с каждой вещью.

Вот смешанный jQuery, решение JS 

function selectElement(element) {
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.selectNodeContents(element);
        sel.addRange(range);
    } else if (document.selection) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(element);
        textRange.select();
    }
}

selectElement($("div")[0]); //Select the div
$("input").trigger("select");  //select the inputs

Демо

0 голосов
/ 02 апреля 2012

Не совсем.В большинстве браузеров невозможно выбрать содержимое более чем одного входа одновременно.Смотри http://jsfiddle.net/timdown/D5sRE/1/

0 голосов
/ 02 апреля 2012

Если вы хотите выбрать внутри элементов формы. Используйте функции .focus() /.blur() и .val(). 

 $('input').focus(); //focus on input element
 $('input').val(); //return the value of input
...