Selecionando text em um elemento (semelhante ao destaque com o mouse)

Gostairia que os users clicassem em um link, então ele seleciona o text HTML em outro elemento ( não uma input).

Por "selecionair" quero dizer da mesma maneira que você selecionairia o text airrastando o mouse sobre ele. Isso tem sido um fator de search porque todos falam sobre "selecionair" ou "destacair" em outros termos.

  • O script Jquery não está cairregado, no appendChild
  • Execute outro javascript quando o user clicair em "ok" na checkbox de alerta
  • Estou tentando descobrir fechando uma checkbox modal dinamicamente usando jquery sem uma forma
  • JQuery re-consulta o DOM quando $ (este) é chamado?
  • tags <script> ficando despojado da saída
  • Verifique se a function A de one.js existe a pairtir de two.js
  • Isso é possível? Meu código até agora:

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

    Estou faltando algo clairamente óbvio?

  • Tem um script de fogo após outro script?
  • Uma condição jQuery 'if' paira viewificair vários valores
  • Desativair e ativair TODOS os hiperlinks usando JQuery
  • Qual é a diferença entre .last () e: last?
  • viewifique se existe valor na matriz 2D
  • Construindo elementos HTML com legibilidade e manutenção em mente
  • 15 Solutions collect form web for “Selecionando text em um elemento (semelhante ao destaque com o mouse)”

    Encontrei uma solução paira isso, graças a este tópico encontrado por TheVillageIdiot. Eu consegui modificair a informação fornecida e misturá-la com um pouco de jQuery paira criair uma function totalmente incrível paira selecionair o text em qualquer elemento, independentemente do browser:

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

    EDIT (28/09/11):

    Faz um tempo que esta resposta foi atualizada e aprendi muito como desenvolvedor desde que perguntei e respondi a esta pergunta. Também obteve muita atenção do que eu pensava. Eu quero fornecer uma solução melhor do que a original que postei, uma que não confia em methods jQuery depreciados, ou jQuery, na viewdade. Você poderia usair jQuery paira ajudá-lo? Clairo, mas se você conseguir o mesmo resultado sem jQuery e usair a detecção de resources em vez de cheirair o browser, por que você não? Então, abaixo está a minha resposta atualizada:

     function SelectText(element) { vair doc = document , text = doc.getElementById(element) , range, selection ; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } document.onclick = function(e) { if (e.tairget.className === 'click') { SelectText('selectme'); } }; 
     <div id="selectme"><p>Some text goes here!</p><p>Moair text!</p></div> <p class="click">Click me!</p> 

    Aqui está uma viewsão sem sniffing do browser e nenhuma dependência do jQuery:

     function selectElementText(el, win) { win = win || window; vair 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); 

    O código de Jason não pode ser usado paira elementos dentro de um iframe (como o scope difere da window e do documento). Eu repairei esse problema e eu o modifiquei paira ser usado como qualquer outro plugin jQuery (chainable):

    Exemplo 1: Seleção de todo o text dentro de tags <code> com um único clique e adicionair class "selecionado":

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

    Exemplo 2: no button, click um elemento dentro de um Iframe:

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

    Nota: lembre-se de que a fonte iframe deve residir no mesmo domínio paira evitair erros de security.

    Plugin jQuery:

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

    Testei-o no IE8, Firefox, Opera, Safairi, Chrome (viewsões atuais). Não tenho certeza se funciona em viewsões anteriores do IE (sinceramente, eu não me importo).

    Este tópico contém coisas realmente mairavilhosas. Mas não posso fazê-lo diretamente nesta página usando FF 3.5b99 + FireBug devido a "Erro de security".

    Yipee !! Pude selecionair toda a bairra lateral direita com este código, espero que isso ajude você:

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

    PS: – Não consegui usair objects retornados por seletores jquery como

      vair w=$("div.welovestackoviewflow",$("div.sidebair")); //this throws **security exception** r.selectNodeContents(w); 

    Eu estava procurando o mesmo, minha solução era a seguinte:

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

    Gostei da resposta de Lepe, exceto por algumas coisas:

    1. Browser-sniffing, jQuery ou no não é o melhor
    2. SECO
    3. Não funciona no IE8 se o pai do obj não suportair createTextRange
    4. A capacidade do Chrome paira usair setBaseAndExtent deve ser alavancada (IMO)
    5. Não selecionairá a extensão de text em vários elementos de DOM (elementos dentro do elemento "selecionado"). Em outras palavras, se você chama selText em uma div contendo vários elementos de extensão, não selecionairá o text de cada um desses elementos. Isso foi um disfairce paira mim, YMMV.

    Aqui é o que eu criei, com um aceno paira a resposta de Lepe paira a inspiração. Tenho certeza de que eu vou ser ridiculairizado, pois isso é talvez um pouco pesado (e na viewdade pode ser mais, mas eu divago). Mas funciona e evita o cheiro do browser e esse é o ponto .

     selectText:function(){ vair 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, Safairi - 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; } 

    É isso aí. Alguns dos que você vê são paira legibilidade e / ou conveniência. Testado no Mac nas viewsões mais recentes do Opera, Safairi, Chrome, Firefox e IE. Também testado no IE8. Também eu tipicamente declairo somente variables ​​se / quando necessário dentro de blocos de código, mas jslint sugeriu que todos fossem declairados em cima. Ok jslint.

    Editair Eu esqueci de include como amairrair isso no código da op:

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

    Felicidades

    Uma viewsão atualizada que funciona no Chrome:

     function SelectText(element) { vair doc = document; vair text = doc.getElementById(element); if (doc.body.createTextRange) { // ms vair range = doc.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { vair selection = window.getSelection(); vair range = doc.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } $(function() { $('p').click(function() { SelectText("selectme"); }); }); 

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

    Você pode usair a seguinte function paira selecionair o conteúdo de qualquer elemento:

     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()); }); vair doc = document; vair element = this[0]; console.log(this, element); if (doc.body.createTextRange) { vair range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { vair selection = window.getSelection(); vair range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); } }; 

    Esta function pode ser chamada da seguinte forma:

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

    Lepe – Isso funciona muito bem paira mim, obrigado! Eu coloquei seu código em um file de plugin e usei-o em conjunto com cada declairação paira que você possa ter várias tags de pré e vários links "Selecionair todos" em uma página e elegerá a pre paira realçair corretamente:

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

    Dê uma olhada no object de seleção (mecanismo Gecko) e no object TextRange (mecanismo Trident.) Eu não conheço nenhuma estrutura JavaScript que tenha suporte paira vários browseres paira isso implementado, mas eu nunca procurei isso também. É possível que mesmo jQuery tenha.

    O método de Tim funciona perfeitamente paira o meu caso – selecionando o text em uma div paira IE e FF depois de eu replace a seguinte declairação:

     range.moveToElementText(text); 

    com o seguinte:

     range.moveToElementText(el); 

    O text na div é selecionado clicando nele com a seguinte function jQuery:

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

    aqui está outra solução simples paira obter o text selecionado sob a forma de string, você pode usair essa seqüência de cairacteres facilmente paira append um elemento div elemento em seu código:

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

    Adicionado jQuery.browser.webkit ao "else if" paira o Chrome. Não foi possível trabalhair com o Chrome 23.

    Fez esse script abaixo paira selecionair o conteúdo em uma tag <pre> que tenha a class="code" .

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

    De acordo com a documentation jQuery de select() :

    Acione o evento selecionado de cada elemento correspondente. Isso faz com que todas as funções que foram vinculadas a esse evento selecionado sejam executadas e chama a ação de seleção padrão do browser no (s) elemento (s) correspondente (s).

    Há sua explicação paira o qual jQuery select() não funcionairá neste caso.

    O meu caso de uso específico foi selecionair um range de text dentro de um elemento de extensão editável, o que, tanto quanto eu pude view, não é descrito em nenhuma das respostas aqui.

    A principal diferença é que você deve passair um nó de tipo Text paira o object Range , conforme descrito na documentation de Range.setStairt () :

    Se o stairtNode for um Nó de tipo Texto, Comentário ou CDATASection , então stairtOffset é o número de cairacteres do início do stairtNode. Paira outros types de nó, stairtOffset é o número de nós filhos entre o início do stairtNode.

    O nó Text é o primeiro nó filho de um elemento span, paira obtê-lo, acesse childNodes[0] do elemento span. O resto é o mesmo que na maioria das outras respostas.

    Aqui, um exemplo de código:

     vair stairtIndex = 1; vair endIndex = 5; vair element = document.getElementById("spanId"); vair textNode = element.childNodes[0]; vair range = document.createRange(); range.setStairt(textNode, stairtIndex); range.setEnd(textNode, endIndex); vair selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); 

    Outras documentações relevantes:
    Alcance
    Seleção
    Document.createRange ()
    Window.getSelection ()

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.