Utiliser jQuery (select) pour sélectionner le contenu d'un div

Est-il possible d'utiliser ou d'adapter jQuery .sélectionnez() pour définir une plage de sélection sur l'ensemble du contenu d'un div?

J'ai un div qui a une série d'étiquettes, d'intrants, de sélectionner des objets et un couple d'autres éléments de l'INTERFACE utilisateur. J'ai trouvé le code sur un autre StackOverflow post avec un peu de code hébergé sur jsFiddle: http://jsfiddle.net/KcX6A/570/

Cela peut-il être adapté pour sélectionner la valeur des intrants? Ou comment vous me suggère d'aller à ce sujet?

Grâce,
Conor

Edit: Plus d'infos

Je sais comment obtenir la valeur des intrants à l'aide de jQuery, c'est facile, je sais aussi comment sélectionner les valeurs des éléments indépendants de l'utiliser .sélectionnez().

Dans mon div, j'ai une série de différents types d'éléments, y compris les entrées, les étiquettes, les sélectionne, etc. J'ai besoin d'une sélection globale de tous les éléments. Le jsFiddle lien que j'ai ajouté précédemment montre comment définir la portée d'un div et de sélectionner le texte d'éléments comme les balises p etc. Ce dont j'ai besoin est de définir la plage de la div du contenu et, quand j'appuie sur ctrl+c ou cmd+c copie les valeurs des entrées ainsi que les étiquettes.

Donc, pour résumer, l'aide .val et .sélectionnez de ne pas travailler pour ce que je ne pense pas. J'ai besoin de combiner les au-dessus d'une certaine façon, mais vous ne savez pas exactement comment cela sera fait. Des idées?

N'avez-vous pas simplement les .val()?
Dans quel but voulez-vous sélectionner tout, y compris les valeurs d'entrée?

OriginalL'auteur Bob-ob | 2012-04-02

  1. 14

    Vérifier ce violon: http://jsfiddle.net/JAq2e/

    Fondamentalement, l'astuce consiste à introduire un texte caché nœud dont le contenu sera inclus dans la sélection lors de la copie.

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

    Et de l'utiliser comme:

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

    Vous pouvez coupler le plugin ci-dessus avec un gestionnaire d'événement si vous souhaitez créer des liens de sélection :

    Code :

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

    Utilisation :

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

    De démonstration : voir js fiddle

    cela fonctionne un régal, un grand travail! J'ai dû adapter un peu et il fait plus propre par le réglage de l'opacité de la préfixé éléments à 0. Sinon, le processus est loin d'être homogène 🙂
    seulement si et d'ailleurs, si la partie est nécessaire

    OriginalL'auteur techfoobar

  2. 1

    Si vous souhaitez sélectionner les éléments d'entrée avec chaque chose.

    Ici est un jQuery mixte, JS solution

    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

    Démo

    OriginalL'auteur Starx

  3. 0

    Si vous souhaitez sélectionner à l'intérieur des éléments de formulaire. Utilisation .focus() /.blur() et .val() fonctions.

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

    OriginalL'auteur safarov

  4. 0

    Pas vraiment. Dans la plupart des navigateurs, il n'est pas possible pour le contenu de plus d'une entrée pour être sélectionné à la fois. Voir http://jsfiddle.net/timdown/D5sRE/1/

    Est-il destiné à être, ou, votre démonstration ne sélectionnez pas même une zone de
    Je sais, c'est la question que j'ai est venu à travers, tout en essayant de trouver une solution. Ce que je trouve vraiment ennuyeux, c'est que lorsque vous copiez tous les éléments de votre interface, ou aller à sélectionner tous les éléments de votre interface/page html, il sélectionne le cadre de l'entrée html, mais pas le contenu, bien qu'il donne l'illusion que le contenu ont été mis en évidence aussi. Natif question qui sera probablement venir si rarement qu'il ne sera jamais traitée avec toutefois.
    Dans le navigateur? Il sélectionne le contenu de la deuxième case dans mon Windows Chrome et Firefox.

    OriginalL'auteur Tim Down