选择全部或突出显示元素中的所有文本

我一直在寻找像这样的东西，但由于某种原因，我无法使其工作。我不确定我错过了什么或者做错了什么。这里找到选择全部或突出显示元素中的所有文本

参考文献： http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html

Selecting text in an element (akin to highlighting with your mouse)

如果有人能可能抽出时间，将不胜感激感谢。

我正在使用新引导3.0.2，prettify和select2.js来引用在此处找到的演示，为复制和粘贴代码设置横幅交换。

(function() { 
    function selectText(element) { 
     var doc = document 
      , text = element 
      , range, selection 
     ; 
     if (doc.body.createTextRange) { //ms 
      range = doc.body.createTextRange(); 
      range.moveToElementText(text); 
      range.select(); 
     } else if (window.getSelection) { //all others 
      selection = window.getSelection(); 
      range = doc.createRange(); 
      range.selectNodeContents(text); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } 
    } 
    preTags = document.getElementsByTagName('pre'); 
    for(var i=0;i<preTags.length;i++) { 
     preTags[i].onclick = function() {selectText(this)}; 
    } 
})();

这是我设置的演示代码。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap Banners Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen"> 
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet"> 
    <script src="js/select2.js"></script> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 

    <div style="margin-top: 20px;"></div> 

    <div class="container"> 

<div style="margin-top:50px;"></div> 

<ul class="nav nav-pills"> 
    <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li> 
</ul> 



<div class="tab-content"> 

    <div style="margin-top:20px;"></div> 
    <div class="tab-pane fade in active" id="demo1"> 
    <p></p> 
    <p>Copy and Paste Code:</p> 

    <pre class="prettyprint linenums lang-html"> 
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
    &lt;head&gt; 
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
    &lt;h1&gt;Hello, World!&lt;/h1&gt; 
    &lt;/body&gt; 
&lt;/html&gt; 
</pre> 

    </div> 


    </div> 

</div> 


<div style="margin-top: 50px;"></div> 

</div> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script> 
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script> 
    <script> 
    !function ($) { 
    $(function(){ 
     window.prettyPrint && prettyPrint() 
    }) 
    }(window.jQuery) 
</script> 
    </body> 
</html>

来源

2014-01-15 user2407463

百万美元的问题是：什么是问题？ – tenub

我很难找到跨浏览器的方式从标准元素中选择文本。你可能不喜欢我的解决方案，但我只是点击创建一个标准的输入/文本区域，取代原来的元素。然后你可以使用'.focus（）。select（）'（用jQuery）来选择全部。在模糊处，再次显示原稿。如果你的元素已经是textarea或文本输入，你不应该有任何麻烦！ –

也许，你可以使用window.getSelection()获得全球Selection对象，然后修改它？来自developer.mozilla.org的示例：

var strongs = document.getElementsByTagName("strong"); 
var s = window.getSelection(); 

if(s.rangeCount > 0) s.removeAllRanges(); 

for(var i = 0; i < strongs.length; i++) { 
    var range = document.createRange(); 
    range.selectNode(strongs[i]); 
    s.addRange(range); 
}

来源

2014-01-15 21:10:03 lexasss

谢谢你们，我非常感谢你们的帮助。我对你的回答做了一些研究，并得到了剧本作者的回复。我拉着头发，有点想把它扔出窗外：P

无论如何，作者Satya声明，select.js脚本需要位于文档的END而不是头文件中。它也很棒！

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap Banners Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen"> 
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet"> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<div class="container"> 
<div style="margin-top:50px;"></div> 
<ul class="nav nav-pills"> 
    <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li> 
</ul> 
<div class="tab-content"> 
<div style="margin-top:20px;"></div> 
<div class="tab-pane fade in active" id="demo1"> 
<p></p> 
<p>Copy and Paste Code:</p> 
<pre class="prettyprint linenums lang-html"> 
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
    &lt;head&gt; 
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
    &lt;h1&gt;Hello, World!&lt;/h1&gt; 
    &lt;/body&gt; 
&lt;/html&gt; 
</pre> 
</div> 
</div> 
</div> 
<div style="margin-top: 50px;"></div> 
</div> 
<script src="js/select2.js"></script> 
    <script> 
    !function ($) { 
    $(function(){ 
     window.prettyPrint && prettyPrint() 
    }) 
    }(window.jQuery) 
</script> 
    </body> 
</html>

来源

2014-01-16 22:47:27 user2407463

选择全部或突出显示元素中的所有文本

回答

相关问题