0

我一直在寻找这样的东西，但由于某种原因，我无法让它工作。我不确定我错过了什么或做错了什么。

在这里找到的参考资料：http: //www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html

选择元素中的文本（类似于用鼠标突出显示）

如果有人可以抽出一些时间将不胜感激谢谢。

我正在使用新的引导程序 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>
4

2 回答 2

1

也许，您可以使用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-15T21:10:03.147 回答
0

谢谢大家，我真的很感谢你的帮助。我对您的回复进行了一些研究，并得到了脚本作者的回复。我把头发拉出来，有点想把推杆扔出窗外：P

无论如何，作者 Satya 表示 select.js 脚本需要位于文档的末尾而不是标题中。它也很好用！

<!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-16T22:47:27.507 回答